Simulación de animación de carga dinámica con temporizador en Canvas de JS

Este ejemplo muestra cómo compartir una animación dinámica de temporizador de Canvas, para su referencia, el contenido específico es el siguiente

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500">Tu navegador no admite la tecnología canvas</canvas>
  <script>
    var c = document.getElementById('canvas');
    var ctx= c.getContext('2d');
    ctx.translate(c.width/2, c.height/2);
    //Primero dibuja8un círculo estático envuelto
    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);
      }
    }
    //Giro programado
    setInterval(function(){
      ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
      create();
      ctx.rotate(Math.PI*45/180);
    },300);
    //Cierre de carga programado
    setTimeout(function(){
     c.style.display='none';
   },12200);
    //
  </script>
</body>
</html>

Este es el contenido completo del artículo, esperamos que sea útil para su aprendizaje y que todos apoyen a la tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido se ha subido por los usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido se ha subido por los usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará