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

Diseñado con el mouse - Limpiar pantalla con clic derecho

Buen dia.

Tengo una duda con el ejercicio Diseñado con el mouse. Decidi experimentar dandole al clic derecho la funcionalidad para limpiar la pantalla. Al parecer funciona, pero me queda un punto en pantalla que no se borra, adjunto mi codigo:

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var puedoDibujar = false;
    var xRojo = 0;
    var xVerde = 50;
    var xAzul = 100;
    var yCuadrados = 0;
    var medidaCuadrados = 50;
    var colorActual = "blue"

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

    function dibujarCirculo(x, y, colorActual) {

        if(puedoDibujar) {            
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function puedeDibujar(xCoordenada, yCoordenada) {
        if((xCoordenada >= 0 && (xCoordenada < (3*medidaCuadrados+5)) && (yCoordenada >=0 && yCoordenada < (medidaCuadrados+5)))) {
            return false;
        } else {
            return true;
        }
    }

    function capturaMovimiento(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if(puedeDibujar(x, y)) {
            dibujarCirculo(x, y, colorActual);
        }
    }

    function dibujarCuadrado(x, y, medida, color) {
        pincel.fillStyle = color;
        pincel.fillRect(x, y, medida, medida);
        pincel.fill();
    }

    function dibujarPaleta() {
        dibujarCuadrado(xRojo, yCuadrados, medidaCuadrados, "red");
        dibujarCuadrado(xVerde, yCuadrados, medidaCuadrados, "green");
        dibujarCuadrado(xAzul, yCuadrados, medidaCuadrados, "blue");
    }

    function seleccionarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if(y > yCuadrados && y < (yCuadrados + medidaCuadrados)) {
            if(x > xRojo && x < (xRojo + medidaCuadrados)) {
                colorActual = "red";                
            } else if (x > xVerde && x < (xVerde + medidaCuadrados)) {
                colorActual = "green";
            } else if(x > xAzul && x < (xAzul + medidaCuadrados)) {
                colorActual = "blue";
            }
        }
    }

    function clrScr() {
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = 'grey';
        pincel.fillRect(0, 0, 600, 400);
        dibujarPaleta(); 
        return false;
    }

    pantalla.onclick = seleccionarColor;

    pantalla.oncontextmenu = clrScr;

    pantalla.onmousemove = capturaMovimiento;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    dibujarPaleta();

</script>

Tendran alguna sugerencia para evitar que esto pase?

Saludos.

1 respuesta

¡Hola Edgar!

Gracias por compartir tu código. Parece que estás experimentando con la funcionalidad de limpiar la pantalla al hacer clic derecho en el lienzo. Sin embargo, estás experimentando un problema donde queda un punto en la pantalla que no se borra.

Una posible solución para evitar esto es agregar un evento de "contextmenu" al lienzo y llamar a la función "clrScr" para limpiar la pantalla en ese evento también. Así, cuando hagas clic derecho, se limpiará la pantalla correctamente.

Aquí está el código modificado:

pantalla.oncontextmenu = clrScr;

function clrScr(evento) {
    evento.preventDefault(); // Evita que aparezca el menú contextual del navegador
    pincel.clearRect(0, 0, 600, 400);
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    dibujarPaleta(); 
    return false;
}

Agregué la línea evento.preventDefault(); para evitar que aparezca el menú contextual del navegador al hacer clic derecho.

Espero que esto solucione tu problema. ¡Buena suerte con tu experimento!

Espero haber ayudado y buenos estudios!

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