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

Color de pantalla

Hola, hice un parde cambios al programa. El primero fue agregar unas lineas a la función limpiarPantalla para mantener el fondo gris y el segundo fue poner una condición para que el circulo parara en la posición 580, como se planteo al inicio del ejercicio.

<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 dibujarCirculo(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); 
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);
    }

    var x = 20;

    function actualizarPantalla(){
        if(x < 580){
            limpiarPantalla();
            dibujarCirculo(x,20,10);
            x++;
            }
        }

    setInterval(actualizarPantalla,25);

</script> 
4 respuestas

Hola Heriberto

que bueno, yo estuve practicando mucho también con colores

Saludos

Hola Heriberto, consulto respecto a esta funcion:

function limpiarPantalla(){
       // pincel.clearRect(0,0,600,400); 
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);
    }

si omites la línea con // funciona igual. Que seria mas optimo:

¿limpiar pantalla con un color definido o redibujar el recuadro ?

Al omitir la primera linea de la función limpiar pantalla lo que siento que estas haciendo es poner otra pantalla sobre la anterior y ahi estas dibujando el nuevo círculo y es por eso que no se ve el círculo anterior. Siento que es como si lo hicieras en una libreta donde dibujas una circunferencia en cada hoja con centr desplazado en el eje x, y luego la pasas muy rápido; eso crearía el efecto de animacion. Al dejarle la linea por el contrário siento que estas ya borrando todos los dibujos creados en la pantalla y creas uno nuevo en la misma pantalla. Al menos así es como lo entiendo yo. Saludos

Hola,

Jesús tiene razón, si eliminar el comando clear de la función se creaá otro recuadro encima del primero y cada que se llame a la funci