집 >웹 프론트엔드 >H5 튜토리얼 >캔버스 - 타이머를 사용하여 동적 로딩 애니메이션을 시뮬레이션하세요!

캔버스 - 타이머를 사용하여 동적 로딩 애니메이션을 시뮬레이션하세요!

高洛峰원래의: 2016-10-12 11:05:071839검색

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

성명：

이전 기사：html5 video.js는 모든 브라우저를 사용하고 호환됩니다.다음 기사：html5 video.js는 모든 브라우저를 사용하고 호환됩니다.

캔버스 - 타이머를 사용하여 동적 로딩 애니메이션을 시뮬레이션하세요!

관련 기사