<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas技术</canvas>
   <script>
       var c=document.getElementById('canvas');
       var ctx= c.getContext('2d');
       ctx.translate(c.width/2, c.height/2);
       //首先绘制8个静态环绕的圆形
       function create() {
           for (var i = 1; i < 9; i++) {
               if (i==1) {
                   ctx.beginPath();
                   ctx.arc(0, -30, 5, 0, 2 * Math.PI);
                   ctx.fillStyle='#f0f';
                   ctx.fill();
               }else{
                   ctx.beginPath();
                   ctx.arc(0, -30, 5, 0, 2 * Math.PI);
                   ctx.strokeStyle ='#000';
                   ctx.stroke();
               }
               ctx.rotate(Math.PI * 45 / 180);
           }
       }
       //定时转动
       setInterval(function(){
           ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
           create();
           ctx.rotate(Math.PI*45/180);
       },300);
       //定时关闭加载
       setTimeout(function(){
          c.style.display='none';
      },12200);
       //
   </script>
</body>
</html>

 

相关文章