2
respuestas

Mi Codigo del Ultimo trabajo (sin terminar)

Les dejo mi código escrito para el ultimo trabajo, lo único que no pude realizar es que no me dibuje sobre la paleta de colores, si alguien sabe como puedo anexarlo me vendría de 10!


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

    var puedoDibujar = false;
    var color = ["blue","red","green"];
    var colorActual = 0;

    function dibujarCirculo(evento) {

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

    }

    function cuadradoRojo() {

        pincel.fillStyle = "red";
        pincel.fillRect(0,0,50,50);
    }
    function cuadradoVerde() {

        pincel.fillStyle = "green";
        pincel.fillRect(50,0,50,50);
    }
    function cadradoAzul() {

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

    cadradoAzul();
    cuadradoVerde();
    cuadradoRojo();

    function colorDibujo(evento) {

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

        if ((x < 50) &&
            (x > 0) &&
            (y < 50) &&
            (y > 0) ) {

            alert("colorRojo");
            if (colorActual <= color.length){
                colorActual = 1;
            }

        }
        if ((x < 100) &&
            (x > 50) &&
            (y < 50) &&
            (y > 0) ) {

            alert("colorVerde");

            if (colorActual <= color.length){
                colorActual = 2;
            }

        }
        if ((x < 150) &&
            (x > 100) &&
            (y < 50) &&
            (y > 0) ) {

            alert("colorAzul");

            if (colorActual <= color.length){
                colorActual = 0;
            }

        }
    }


    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }




    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = colorDibujo;


</script>
2 respuestas

No sabia subir mi código, ignoren este mensaje jajaja

Violento, brother!