JS Canvas定时器模拟动态加载动画

Dieser Artikel teilt Ihnen Beispiele für dynamische Animationen mit Canvas-Timer, die für Ihre Referenz bereitgestellt werden, der genaue Inhalt ist wie folgt

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Dein Browser unterstützt die Canvas-Technologie nicht</canvas>
  <script>
    var c = document.getElementById('canvas');
    var ctx= c.getContext('2d');
    ctx.translate(c.width/2, c.height/2);
    //Zuerst zeichnen8eine statische umlaufende Kugel
    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);
      }
    }
    //Zeitgesteuertes Drehen
    setInterval(function(){
      ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
      create();
      ctx.rotate(Math.PI*45/180);
    },300);
    //Zeitgesteuertes Schließen des Ladens
    setTimeout(function(){
     c.style.display='none';
   },12200);
    //
  </script>
</body>
</html>

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir hoffen, dass Sie die Anleitung unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Wenn Sie verdächtige Urheberrechtsinhalte finden, senden Sie bitte eine E-Mail an: notice#w3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Wenn Sie verdächtige Urheberrechtsinhalte finden, senden Sie bitte eine E-Mail an: notice#w

Grund教程