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

Mi Solucion con if else y booleano | ¡Ya que va, que vuelva!

Les comparto con ustedes mi solución. Lo que use fue un if else y un booleano. Si alguno tiene alguna sugerencia para hacer el código más eficiente, eficaz y efervescente, no dude comentar lo o tomar este código para que mejore su quality of life.

<canvas width="600" height="400"></canvas>
<script>
    pantalla = document.querySelector("canvas");
    pincel = pantalla.getContext("2d");
    gradiante = pincel.createLinearGradient(50,150,150,400);

    //Agregar los 2 colores
    gradiante.addColorStop(0,"#8ba0b5");
    gradiante.addColorStop(1,"#d9e1ea");
    //usar fill tyle y dibjar el rectangulo
    pincel.fillStyle= gradiante;
    pincel.fillRect(0,0,600,400);

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

    function limpiarPantalla(){
        //Propiedad dentro de pincel para limpiar la pantalla
        //Esto hace que el fondo este y no se borre
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle=gradiante;
        pincel.fillRect(0,0,600,400);
    }

    var x = 0;
    var interruptor = true;
    function actualizarPantalla() {
        limpiarPantalla();
        disenharCircunferencia(x,20,10);

        if (interruptor) {
            x++;
            if (x>=600) {
                interruptor= false;
            }
        }else{
            x--;
            if (x==0) {
                interruptor=true;
            }
        }
        console.log(x);
    }    
    //Al PASAR actualizarPantalla como parametro, no lleva()
    setInterval(actualizarPantalla, 10);
</script>
1 respuesta

Funciona muy bien, yo lo había pensado con el if y x-- pero no lo pude concretar. Te felicito!