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

ALGUIEN PODRIA EXPLICARME LA LOGICA?

<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 disenharCircunferencia(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;

        }

        disenharCircunferencia(x,20,10);
        x = x + sentido;
    }

    setInterval(actualizarPantalla,100);

</script> 
1 respuesta

Hola compañero de ONE!

Esta es la solución que propone el instructor. Para resolver la ida y la vuelta del círculo, él crea primeramente dos variables llamadas "x" y "sentido", y les da a la primera el valor de 0 y a la segunda el valor de 1.

"x" es donde aparecerá la circunferencia, y representa la disposición en el eje horizontal, siendo 0 la posición extrema izquierda y 600 la posición extrema derecha. Por eso le da el valor de 0, por fuera de la función "actualizarPantalla", así la circunferencia aparece dibujada a la izquierda. Y coloca dentro del bloque { } de la función "actualizarPantalla", un llamado a la función "limpiarPantalla" y dos condicionales que van a determinar el sentido de dibujado/movimiento de la circunferencia.

El primer condicional if, indica que cuando "x" sea mayor a 600, el bloque dentro de las { } cambiará el valor de "sentido" a -1. El segundo condicional if, indica que cuando "x" sea menor a 0, el bloque dentro de las { } cambiará el valor de "sentido" a 1.

Luego hay un llamado a la función "disenharCircunferencia" para que dibuje la circunferencia, e inmediatamente luego está establecido cómo se irá modificando el valor de "x", para poder controlar este loop infinito.

Mientras "x" no valga 601, la circunferencia será dibujada cada vez un pixel más hacia la derecha. Cuando valga 601 y hasta que no valga -1, la circunferencia será dibujada cada vez un pixel hacia la izquierda.

Cada dibujo acontece cada 100 milisegundos, como está establecido en "setInterval".