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

Mi version!

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

Dejo mi versión, le añadi un pequeño boton donde se puede limpiar la pantalla,saludos.`

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);


    pincel.fillStyle="red";
    pincel.fillRect(0,0,50,50);

    pincel.fillStyle="green";
    pincel.fillRect(50,0,50,50);

    pincel.fillStyle="blue";
    pincel.fillRect(100,0,50,50);

    pincel.fillStyle="yellow";
    pincel.fillRect(550,0,50,50);

    pincel.font="13px Georgia";    
    pincel.fillStyle="black";
    pincel.fillText("Limpiar",550,20);



    let colores=["red","green","blue"];
    let indice=2;



    function cambiarColor(evento){

    let x=evento.pageX-pantalla.offsetLeft;
    let y=evento.pageY-pantalla.offsetTop;

    if((x<50) && (x>0) && (y>0) && (y<50)){
    indice=0;
    }else if((x<100) && (x>50) && (y>0) && (y<50)){
    indice=1;
    }
    else if((x<150) && (x>100) && (y>0) && (y<50)){
    indice=2;
    }
    else if((x<600) && (x>550) && (y>0) && (y<50)){
         location.reload();
    }

}



    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle =colores[indice];
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }





    pantalla.onclick=cambiarColor;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;





</script>
1 respuesta

Hola Augusto, espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno. Me gustó que agregó el botón para limpiar la pantalla, siempre es bueno ver cuando los alumnos agregan cosas a más de lo que se pasó en clase, esto significa que está aprendiendo bien los conceptos

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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