JavaScript动画实例：沿圆周运动的圆圈

1．一个沿圆周运动的圆圈

一个半径为size的圆圈以画布的中心（canvas.width/2,canvas.height/2）为起点，沿着一个圆周运动。编写如下的HTML代码。

<!DOCTYPE html>
<html>
<head>
<title>沿圆周运动的圆圈</title>
</head>
<body>
<script>
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  document.body.appendChild(canvas);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.beginPath();
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var angle =360;
  var pos = [canvas.width/2,canvas.height/2];
  var size = 10;
  var speed = 1;
  var curve = 0.5;
  var color = 'rgba(69,204,255,.95)';
  function draw () 
  {
     var radians = angle*Math.PI/180;
     pos[0] += Math.cos(radians)* speed;
     pos[1] += Math.sin(radians)* speed;
     angle += curve;
     ctx.strokeStyle = color;
     ctx.beginPath();
     ctx.arc(pos[0],pos[1],size,0,2*Math.PI);
     ctx.stroke();
     window.requestAnimationFrame(draw);
  }
  window.requestAnimationFrame(draw);
</script>
</body>
</html>

View Code