首页 > 代码库 > Canvas——使用定时器模拟动态加载动画!

Canvas——使用定时器模拟动态加载动画!

<!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>

 

Canvas——使用定时器模拟动态加载动画!