Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Proyecto] por fin algo sale jajaaaa

<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 colores = ["red","green","blue"];
    var color = 0;
    var x = 0;
    var y = 0;
    var medida = 50;

    pincel.fillStyle = colores[color];
    pincel.fillRect(x,y,medida,50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x,y,50,50);

    pincel.fillStyle = colores[color+1];
    pincel.fillRect(x+50,y,medida,50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x+50,y,50,50);

    pincel.fillStyle = colores[color+2];
    pincel.fillRect(x+100,y,medida,50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x+100,y,50,50);

    function dibujarCirculo(evento,color) {

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

    function escogeRed(evento){
        pincel.fillStyle = colores[color];
        pincel.fillRect(x,y,medida,50);
        dibujarCirculo();
    }

    function escogeGreen(evento){
        pincel.fillStyle = colores[color+1];
        pincel.fillRect(x+50,y,medida,50);
        dibujarCirculo();
    }

    function escogeBlue(evento){
        pincel.fillStyle = colores[color+2];
        pincel.fillRect(x+100,y,medida,50);
        dibujarCirculo();
    }


    function escogeColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if( (x <= medida)&&
            (y <= medida) ){
            escogeRed();
        }else 
        if( (x <= medida+50)&&
            (y <= medida) ){
            escogeGreen();
        }else 
        if( (x <= medida+100)&&
            (y <= medida) ){
            escogeBlue();
        }
    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = escogeColor;

</script>
1 respuesta
solución!

Hola Cristian, como estás?

Gracias por compartir tu proyecto en el foro.

Felicitaciones, continua así aprendiendo.

Si tienes alguna duda 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