JS Canvas 타이머 모拟 동적 로드 애니메이션

이 예제는 Canvas 타이머 동적 로드 애니메이션을 공유하여 참고하시기 바랍니다. 자세한 내용은 다음과 같습니다

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" 너비="500" 높이="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>

이것이 이 문서의 전부입니다. 여러분의 학습에 도움이 되길 바라며, 다들 나르셀 교본을 많이 지지해 주시길 바랍니다.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 원저자의 소유입니다. 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 이에 대한 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하면 메일을 보내 주시기 바랍니다: notice#oldtoolbag.com（메일을 보내면, #을 @으로 변경해 주세요. 신고하고 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 위반된 내용을 삭제할 것입니다。）

기본 가이드

좋아할 것 같은