容易HTML5 Canvas Arrow旋转动画

简单HTML5 Canvas Arrow旋转动画
效果图：
容易HTML5 Canvas Arrow旋转动画

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

代码：
<!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>

源码下载：

容易HTML5 Canvas Arrow旋转动画

相关推荐