¿Todavía no tienes acceso? ¡Estudia con nosotros! Nuestros Planes
¿Todavía no tienes acceso? ¡Estudia con nosotros! Nuestros Planes
1
respuesta

Devolver circulo

<canvas width="600" height="400"></canvas>


<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

       pincel.fillStyle ="lightgrey"; 
       pincel.fillRect(0,0,600,400);

       function disenarCircunferencia(x,y,radio){

           pincel.fillStyle = "blue";
           pincel.beginPath();
           pincel.arc(x,y,radio,0,2*Math.PI);
           pincel.fill();

       }

       function limpiarPantalla(){

           pincel.clearRect(0,0,600,400);
       }

       var x = 0;
       var sentido = 1
       function actualizarPantalla(){

           limpiarPantalla();
           if(x > 600){
               sentido = -1;               
         }else if(x < 0){
             sentido = 1;
           }
         if(sentido == -1){
              x--
           }else if(sentido == 1){
             x++
           }
           disenarCircunferencia(x,20,10);
       }

       setInterval(actualizarPantalla,10);
</script>
1 respuesta

Hola André, espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios