Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Duda cuando el mouse sale de la pantalla.

Buenas, Tengo una duda. Es con la función de habilitar dibujo, y es que al mantener el mouse y sacarlo afuera de la pantalla de dibujo e ingresar, este mantiene "puedoDibujar = true" hasta que haga clic de nuevo. Ahí paso como hice mi código para saber si tendría que cambiar algo. Desde ya, gracias.

<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);

//Variables inciales
    var colores = ["red","green","blue","yellow"];
    var nombreColores = ["rojo","verde","azul","amarillo"]
    var puedoDibujar = false;
    var color = colores[0];
    var tamanhoCuadrados = 50;

//Función para dibujar cada uno de los cuadrados de la paleta
    function crearPaletaColores (colores){
        var lugarX = 0;
        for (var i = 0; i < colores.length; i++) {
            pincel.fillStyle = colores[i];
            pincel.fillRect(lugarX,0,tamanhoCuadrados,tamanhoCuadrados);
            lugarX = lugarX + tamanhoCuadrados;
        }
    }

//Función para cambiar de color al clickear en la paleta
    function cambiarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        for (var i = 0; i < colores.length; i++) {
            if ((x > i*tamanhoCuadrados )&&
                (x < (i+1)*tamanhoCuadrados)&&
                (y > 0)&&
                (y < tamanhoCuadrados)){
                return color = colores[i];
            }  
        }
    }

//Función para crear la linea con circulos consecutivos    
    function dibujarCirculo(evento) {
        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * Math.PI);
            pincel.fill();
        }
    }

//Función para delimitar la pantalla a dibujar
    function poderDibujar (evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if ((x > -5)&&
            (x < (tamanhoCuadrados*colores.length)+5)&&
            (y > -5)&&
            (y < tamanhoCuadrados+5)) {
            return false;
        } else {
            dibujarCirculo(evento);
        } 
    }

//Funciónes para habilitar o no el lienzo
    function habilitarDibujar() {
        puedoDibujar = true;
    }
    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    crearPaletaColores(colores);

//Las acciones del mouse
    pantalla.onmousemove = poderDibujar;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = cambiarColor;

</script>
1 respuesta
solución!

Hola Luis, espero que estés muy bien.

Gracias por compartir tu código con nosotros, contínua con tu estudos :)

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