Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Projecto] ¡Ya que va, que vuelva el circulo en multicolores!

En esta ocasion cada que va avanzando el circulo va cambiando de color. Denle un ojo.

<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 colorAleatorio() {
        var red = Math.floor(Math.random() * 256);
        var green = Math.floor(Math.random() * 256);
        var blue = Math.floor(Math.random() * 256);
        var color = "rgb(" + red + ", " + green + ", " + blue + ")";

        return color;         
    }

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = colorAleatorio();
        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> 

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadIngrese aquí la descripción de esta imagen para ayudar con la accesibilidadIngrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

Buenisimo.

Tengo la presente inquietud, cuando dibujamos el canvas especificamos el color "ligth grey", pero cada vez que se limpia la imagen se torna blanco, lo que sumado a la velocidad en la que se ejecuta el código no nos permite ver el "ligth grey" de manera continua sino que solo al comienzo.

Como se debería declarar para evitar que eso suceda.

Bueno, no es algo que me haya percatado, pero la solucion es sencilla aunque no lo paresca, si te das cuenta en la parte que dice limpiar pantalla, elimina por completo el color de lo que se declaro en un inicio que era "ligthgrey", entonces para que permanezca ese color u otro color que desees, lo correcto seria que en la funcion limpiar pantall() se agrege nuevamente el fillstyle y el fillrect. Te dejo un ejemplo con el fondo de color "Thistle", cheque el inicio y la funcion limpiarPantalla().

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

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

    function colorAleatorio() {
        var red = Math.floor(Math.random() * 256);
        var green = Math.floor(Math.random() * 256);
        var blue = Math.floor(Math.random() * 256);
        var color = "rgb(" + red + ", " + green + ", " + blue + ")";

        return color;         
    }

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

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = "Thistle";
        pincel.fillRect(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> 

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad