Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

baje eje x 100px para que no desaparezca el dibujo

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

    function dibujaCirculo(x,y,radio) {
    pincel.fillStyle="black";
    pincel.beginPath();
    pincel.arc(x,y,radio,0,2*Math.PI);
    pincel.fill();
    }

function limpiaPantalla() {
    pincel.clearRect(0,0,600,400);
}

var x = 0;
var direccion = 0;

function actualizaPantalla() {
    limpiaPantalla();

    if (x > 500) {
        direccion = -1;
    } else if (x < 10) {
        direccion = 1;
            }

    dibujaCirculo(x+0,20,10);
    dibujaCirculo(x+20,40,20);
    dibujaCirculo(x+40,20,10);
    x = x + direccion;
}

setInterval(actualizaPantalla,1);

</script>
1 respuesta

Hola Alumno, cómo estas?

Gracias por compartir tu proyecto con nosotros, continua así, felicidades.

Recomendamos que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartetucodigo) y el foro solo quedaría para cualquier duda que puedas tener sobre el contenido de los cursos.

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