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

Mini paint

Mi versión del ejercicio final :3

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

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

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

    var puedoDibujar = false;
    var color = "#86a0fa"
    var x = 0;
    var y = 0
    function square(x,y,color) {

        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50);

        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);

}
function paleta(evento) {

    x = evento.pageX - pantalla.offsetLeft;
    y = evento.pageY - pantalla.offsetTop;
    console.log(evento);
    if((x < 50) &&
        (y < 50) ) {
        color = "#ee7575"
    }
    if((x < 100) &&
        (x > 50) &&
        (y < 50) ) {
        color = "#abfa86"
    }
    if((x < 150) &&
        (x > 100) &&
        (y < 50) ) {
        color = "#86a0fa"
    }

}



    square(0,y,"#ee7575");//red
    square(50,y," #abfa86");//green
    square(100,y,"#86a0fa");//blue



    function dibujarCirculo(evento) {
        x = evento.pageX - pantalla.offsetLeft;
        y = evento.pageY - pantalla.offsetTop;
        console.log(evento)

        if((x < 150) &&
                (y < 50) ) {
                deshabilitarDibujar()
                }
        if(puedoDibujar) {
            x = evento.pageX - pantalla.offsetLeft;
            y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();

    }


    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        if((x < 150) &&
                (y < 50) ) {
                puedoDibujar = false
                }
        if((x > 150) &&
                (y > 50) ) {
                puedoDibujar = true
                }
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = paleta;


</script>
3 respuestas

Hola, disculpe mi inocencia, pero, cuando hay un if no se debe de poner una condición? Espero tu respuesta para poder entender mejor, muchas gracias de antemano y abrazos.

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

}

En si, el "puedoDibujar" al lado del if, es la condición, pues el código toma por hecho como si hubieras escrito:

    if(puedoDibujar == true) {
        x = evento.pageX - pantalla.offsetLeft;
        y = evento.pageY - pantalla.offsetTop;
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();

}

al no ponerle "(puedoDibujar == true)¨ ahorras unas cuantas letras pero de las dos formas es correcto tratándose de true, al menos eso entendí jeje, si ejecutas el código te darás cuenta que funciona, en fin, ¡espero que halla quedado claro :D!

Oh, muchas gracias, he entendido, buenas noches.