search

Home  >  Article  >  Web Front-end  >  Canvas - Use timers to simulate dynamic loading animations!

Canvas - Use timers to simulate dynamic loading animations!

高洛峰
高洛峰Original
2016-10-12 11:05:071811browse

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

    </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas技术</canvas>
   <script>
       var c=document.getElementById(&#39;canvas&#39;);
       var ctx= c.getContext(&#39;2d&#39;);
       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=&#39;#f0f&#39;;
                   ctx.fill();
               }else{
                   ctx.beginPath();
                   ctx.arc(0, -30, 5, 0, 2 * Math.PI);
                   ctx.strokeStyle =&#39;#000&#39;;
                   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=&#39;none&#39;;
      },12200);
       //
   </script>
</body>
</html>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html5 video.js uses and is compatible with all browsersNext article：html5 video.js uses and is compatible with all browsers

Related articles

See more