简单HTML5 Canvas Arrow旋转动画

效果图:
[img]http://dl2.iteye.com/upload/attachment/0108/8083/a578e2c3-c0e3-39ca-a192-dc7c0793c6e0.gif[/img]

效果链接:
[url]http://www.108js.com/article/canvas/9/demo.html[/url]

代码:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var j=0;


function drawArrow(A){
ctx.save();
ctx.translate(250,250);
ctx.rotate(A);
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(-50,-25);
ctx.lineTo(0,-25);
ctx.lineTo(0,-50);
ctx.lineTo(50,0);
ctx.lineTo(0,50);
ctx.lineTo(0,25);
ctx.lineTo(-50,25);
ctx.lineTo(-50,-25);
ctx.closePath();
ctx.stroke();
ctx.restore();
}


function animate(){
ctx.beginPath();

//ctx.arc(250,250,150,0,Math.PI*2,true);
ctx.stroke();
for(var i=0;i<36;i++)
{
ctx.beginPath();
ctx.arc(250+150*Math.cos(i*2*Math.PI/36),250-150*Math.sin(i*2*Math.PI/36),10,0,Math.PI*2,true);
if(i===j){
ctx.fillStyle="#225599";
ctx.fill();
drawArrow(-i*2*Math.PI/36);

}else{
ctx.stroke();
}
}
j++;
if(j>=36) j=0;
}
loop = setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
animate();

}, 1000);

</script>

</body>
</html>

源码下载:
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页