Simulation d'animation de chargement dynamique avec le timer Canvas JS

Ce tutoriel partage avec vous une animation dynamique de charge du timer Canvas, pour votre référence, voici le contenu détaillé

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Votre navigateur ne prend pas en charge la technologie canvas</canvas>
  <script>
    var c = document.getElementById('canvas');
    var ctx= c.getContext('2d');
    ctx.translate(c.width/2, c.height/2);
    //Tout d'abord, dessinez8un cercle statique entourant
    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);
      }
    }
    //Rotation en temps réel
    setInterval(function(){
      ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
      create();
      ctx.rotate(Math.PI*45/180);
    },300);
    //Fermeture de chargement en temps réel
    setTimeout(function(){
     c.style.display='none';
   },12200);
    //
  </script>
</body>
</html>

Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère aussi que vous soutiendrez fortement le tutoriel d'alarme.

Déclaration : le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléchargé par les utilisateurs d'Internet. Ce site n'a pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base