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

¡Ya que va, que vuelva! parámetros cambio de direccion

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

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

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

    var x = 0;
    var direccion = 1;

    function limpiarPantalla() {

        limpiarCirculo();
        disenarCirculo(x,20,10);
        //Este parámetro se utiliza para reiniciar el valor de x a cero una vez que el círculo dibujado llega al final del canvas
    if (x >= 600) {
        direccion = -1;
        //Este parámetro se utiliza para para hacer que el círculo se mueva en dirección contraria. llega al final del canvas
    }else if  (x <= 0){
        direccion = 1;
    }
    x = x + direccion;


}



    setInterval(limpiarPantalla, 5);
</script>
1 respuesta

¡Hola Luis!

En el código que compartiste, veo que se dibuja un círculo que se mueve de izquierda a derecha en la pantalla. Para hacer que el círculo cambie de dirección, se utiliza la variable "direccion", que se inicializa en 1. Cuando el círculo llega al final del canvas (x >= 600), se cambia el valor de "direccion" a -1, lo que hace que el círculo se mueva hacia la izquierda. Cuando el círculo llega al inicio del canvas (x <= 0), se cambia el valor de "direccion" a 1, lo que hace que el círculo se mueva hacia la derecha nuevamente.

Si quisieras hacer que el círculo cambie de dirección de forma más frecuente, podrías aumentar la velocidad a la que cambia la dirección. Por ejemplo, podrías cambiar el valor de setInterval(limpiarPantalla, 5); a setInterval(limpiarPantalla, 1); para que el círculo cambie de dirección cada milisegundo.

Espero que esto te ayude. ¡Buenos estudios!

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