简单HTML5 Canvas Arrow旋转动画

最新推荐文章于 2024-09-21 07:53:40 发布

iteye_8466

最新推荐文章于 2024-09-21 07:53:40 发布

阅读量414

点赞数

分类专栏： HTML5 动画游戏文章标签： html JavaScript html5 编程 ViewUI

HTML5 动画游戏专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果图：
[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>

源码下载：