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

Pizarra hecho sin ayudin!!!

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

    function dibujarCirculo(evento) {

        if(puedoDibujar ) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if (!((x < 120) && (x > 0) && (y < 40) && (y > 0))){
                pincel.fillStyle = color;
                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.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;


    //dibujar Paleta
     function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function dibujarPaleta() {


        dibujarRectangulo(0,0,40,40,"red");
        dibujarRectangulo(40,0,40,40,"blue");
        dibujarRectangulo(80,0,40,40,"green")
    }

    function elegirColor(evento){

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

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

            color = "red";
        }
        if ((x < 80) && (x > 40) && (y < 40) && (y > 0) ) {

            color = "blue";
        }
        if ((x < 120) && (x > 80) && (y < 40) && (y > 0) ) {

            color = "green";
        }
    }

    pantalla.onclick = elegirColor;

    dibujarPaleta();

    //function selectColor()



</script>
3 respuestas

Sin ayuda al fin pude armar un programa!!!! es genial como se siente...

Hola Gastón

Gracias por compartir tu código, está muy bien felicitaciones.

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

Hola Gastón, cuesta, pero se siente bien lograrlo. Probé tu código y funciona perfecto. Saludos cordiales