1

¿Cómo puedo rotar un círculo sobre su propio eje en canvas como tipo animacion? tipo esto animacion de ejemplo debo realizar una animación en la que se muestra cómo se va construyendo un círculo usando el método arc y utlizando html css y js

HTML
<canvas id="circulo" width="300px" height="200px">
</canvas>

CSS

#circulo{
border: 1px solid red; 
background: lightgrey;
}

JS

var canvas= 
document.getElementById('circulo');
var ctx= canvas.getContext('2d');
var x=150;
var y=100;
var radius= 75;
var startAngle= 0;
var endAngle= 2 * Math.PI;
var counterClockwise= false;
ctx.beginPath();
ctx.arc(x,y,radius,startAngle,endAngle,counterClockwise);
ctx.linewidth=10;
ctx.stokeStyle='black';
ctx.stoke();

1 respuesta 1

2

La solucion es de dibujar el circulo en partes y esperar un ratito con cada vez que se dibuja un parte. Cuando lo hagas con un intervalo de 100 milisegundos y marcas unos 0.1 rad a la vez, se vea bonito.

<!DOCTYPE html>
<html>
<head>
<style>
   #circulo{
      border: 1px solid red;
      background: lightgrey;
   }
</style>
<script type="text/javascript">

    function loop(i) {
      setTimeout(function() {
          if (i < Math.PI * 2) {
             circulandose(i, i + 0.1);
             i = i + 0.1;
             loop(i); 
          }
      }, 100)
    }

   function circulandose(startAngle, endAngle) {

        var canvas = document.getElementById('circulo');
        var ctx = canvas.getContext('2d');
        var x = 150;
        var y = 100;
        var radius = 75;
        var counterClockwise = false;
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        ctx.linewidth = 10;
        ctx.strokeStyle = 'black';
        ctx.stroke();
   }
</script>
</head>
<body onload="loop(0)">
    <canvas id="circulo" width="300px" height="200px">
    </canvas>
</body>
</html>
2
  • Muchas gracias :)
    – user202400
    Commented el 21 nov. 2020 a las 21:55
  • De nada! Si viste util la respuesta, lo marcaras util para que otros que lo lean, saben lo tambien imediatamente. Gracias.
    – mico
    Commented el 21 nov. 2020 a las 22:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.