闲来无写的，就是中间有一条小细线，求大神指点。

  <!DOCTYPE html>
  <html>
   
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
   
  <body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script type="text/javascript">
  var oC = document.getElementById("canvas");
  var ctx = oC.getContext("2d");
   
  ctx.translate(250,250);
  function autoplay() {
  // 左边
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(0, 0, 200, Math.PI * 0.5, Math.PI * 1.5, false);
  ctx.fill();
  ctx.closePath();
   
   
  // 右边
  ctx.beginPath();
  ctx.fillStyle = "white";
  ctx.strokeStyle = "black";
  ctx.arc(0, 0, 200, Math.PI * 1.5, Math.PI * 0.5, false);
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
  // 小大的
  ctx.beginPath();
  ctx.fillStyle = "white";
  ctx.arc(0, -100, 100, Math.PI * 0.5, Math.PI * 1.5, false);
  ctx.fill();
  ctx.closePath();
   
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(0, 100, 100, Math.PI * 1.5, Math.PI * 0.5, false);
  ctx.fill();
  //小小的
  ctx.beginPath();
  ctx.fillStyle = "white";
  ctx.arc(0, 100, 35, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.closePath();
   
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(0, -100, 35, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.closePath();
  }
   
   
  var deg = 0;
  // setInterval(function(){
  // deg += Math.PI / 6;
  // // 清空
  // ctx.clearRect(-250,-250,500,500);
  // ctx.rotate(Math.PI / 100);
  // autoplay();
  // },20)
   
   
  // function move(){
  // deg = Math.PI / 6;
  // // 清空
  // ctx.clearRect(-250,-250,500,500);
  // ctx.rotate(Math.PI / 100);
  // autoplay();
  // setTimeout(move,100);
  // }
  // move();
  function move(){
  deg = Math.PI / 6;
  // 清空
  ctx.clearRect(-250,-250,500,500);
  ctx.rotate(Math.PI / 100);
  autoplay();
  // 当浏览器渲染刷新的时候调用
  window.requestAnimationFrame(move);
  }
  move();
  </script>
  </body>
   
  </html>
   
   
   
   
   
   
   
   
   
posted @ 2016-08-23 16:41  内涵Tv~馒头  阅读(88)  评论(0)    收藏  举报