首页  »   HTML5

容易HTML5 Canvas Arrow旋转动画

网友分享于:2015-05-25  浏览:0次
简单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>

源码下载:

相关解决方案

最新解决方案