Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Solución Paleta Colores

<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 colores = ["red","green","blue"];
    var p_x;
    var p_y;
    var puedoDibujar = false;
    var color = "black";

    function dibujar_paleta(){
        p_x=0
        p_y=0;
        for(var i = 0; i<colores.length;i++){
            pincel.fillStyle = colores[i];
            pincel.fillRect(p_x,0,50,50);
            p_x = p_x + 50;
        }
    }

    function paleta(evento){
        var x_d,x_iz,y_ar,y_ab;
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        x_d = 50;
        x_iz = 0;
        y_ar = 0;
        y_ab = 50 
        for(var i = 0; i < 3; i++){ 
            if((x < x_d)&&(x > x_iz)&&(y<y_ab)&&(y>y_ar)){   
                color = colores[i];
            }
            x_d=x_d+50;
            x_iz = x_iz + 50;
        }
    }

    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 * 3.14);
            pincel.fill();
        }

    }

    dibujar_paleta();
    pantalla.onclick = paleta;
    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;
</script>
1 respuesta

Hola Juan

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