JS Canvas Timer Simulation of Dynamic Loading Animation

This example shares the dynamic loading animation of Canvas timer with everyone for reference, the specific content is as follows

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Your browser does not support canvas technology</canvas>
  <script>
    var c = document.getElementById('canvas');
    var ctx= c.getContext('2d');
    ctx.translate(c.width/2, c.height/2);
    //First draw8a static circular ring
    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);
      }
    }
    //Timing rotation
    setInterval(function(){
      ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
      create();
      ctx.rotate(Math.PI*45/180);
    },300);
    //Timing to close loading
    setTimeout(function(){
     c.style.display='none';
   },12200);
    //
  </script>
</body>
</html>

That's all for this article. Hope it will be helpful to everyone's learning, and also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When reporting via email, please replace # with @) for reporting violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial