帮 问答 模块一哥们写demo
效果图如下:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
html{height:100%;}
body{height:100%;}
#shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;}
</style>
<script type="text/javascript">
var c;
var cxt;
var loadresult=-1;
var loadtext="Loading...";
var loadValue=0;
var temp=false;
function demo(){
c=document.getElementById("myCanvas");
cxt=c.getContext("2d");
cxt.lineWidth=1;
cxt.fillStyle="#666666";
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(100,100,28,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="black";
cxt.fillText(loadtext,77,100);
cxt.save();
}
function show()
{
demo();
}
function loadfun()
{
window.setInterval("changeText()",200)
}
function changeText()
{
cxt.clearRect(85,102,20,15);
loadValue+=1;
loadtext=loadValue+"%";
cxt.fillText(loadtext,90,112);
loadresult+=4;
cxt.beginPath();
cxt.strokeStyle = "black";
cxt.lineWidth = 20;
/**
* context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
* 画圆弧,可以是整个弧,也可以是一部分
* @param: x 圆弧的中心坐标
* @param: y 圆弧的中心坐标
* @param: radius 圆弧的半径
* @param: startAngle 圆弧的起始角度
* @param: endAngle 圆弧的结束角度
* @param: anticlockwise 是否为《逆》时针方向
*
* 其中角度是沿着x轴方向为0或360度,x轴的反向为180度
* y轴的反向为90度,y轴方向为270度
*/
cxt.arc(100, 100, 38, (Math.PI / 180) * loadresult, (Math.PI / 180) * 360, true);
cxt.stroke();
cxt.closePath();
}
</script>
</head>
<body onLoad="show()">
<input type="button" value="Loading..." onClick="loadfun()"/>
<div id="shoot">
<canvas id="myCanvas" width="1400px" height="800px">
抱歉!您的浏览器不支持html5的canvasAPI,请更换浏览器查看!
</canvas>
</div>
</body>
</html>
分享到:
相关推荐
小程序canvas,需要到project.config.json文件添加你自己的appid,在request请求中填写你的图片上传路径
Android Canvas画布使用Demo源码.rar
Canvas画图经典全面Demo 涵盖Canvas画图各个方面
a lot of description of canvas image demo
HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状
htm2Canvas实现网页截图功能,包括demo。
html2canvas生成图片的一个小的demo,解决了在当时开发过程中遇到的一些bug,demo内有注释
javaFX canvas api 之 画布创建模拟图层切换的例子 demo
cavas组件编辑图片,添加文字,修改背景颜色等,来源为github
CanvasDemo Canvas的小例子
基于antv-g6实现的一些基础的canvas小demo,包括ract ,自定义节点,combo,自定义组,及相关的事件等效果
canvas 实现五子棋 的示例,纯HTML5, 算法上可能还需要优化
1、html5 2、地球旋转 3、canvas
里面有关于canvas的使用,非常详细的代码注释,绘制直线,方框,方块,弧线,渐变,对图像像素数据进行操作,图片变灰,取二值,取反色。可以直接看效果
个人学习html5 canvas,使用canva画的各类图形和很适合入门的代码。内附效果截图
用canvas实现的简单的指针小动画
astral
canvas_demo源码,是一个很不错的C++源码,有兴趣的伙伴们抽时间可以看一下把。
Android_Canvas_Demo