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

Ejercicio- Diseñando con el mouse. + una duda...

Mi duda es: cuando hago clic con un color seleccionado y voy pintando desde una zona gris hasta la zona de la paleta y suelto el clic en algunos de los colores y quiero retomar de nuevo a pintar, me queda seleccionado el color donde solté el clic.

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

    //Declaramos la variable del color de inico o por default
    var color="blue";    

    //Funcion para crear los cuadros de la paleta de colores y debajo las llammamos para que se muestren
    function paletaColores(x,y,tamanio, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,tamanio,tamanio);
    }
    paletaColores(0,0,50,"red")
    paletaColores(50,0,50,"green")
    paletaColores(100,0,50,"blue")

    //Alteramos ésta funcion para restringir el area a dibujar
    function dibujarCirculo(evento) {

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

            if ((x > 0)&&
                (x < 160)&&
                (y > 0)&&
                (y < 60)){
                puedoDibujar=false;
            } 

            else{
                puedoDibujar = true;
                pincel.fillStyle = color;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();

            }  
        }
    }

    //Funcion para seleccionar el color, si se hace clic en un rango de coordenadas cambia de color
    function seleccionarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y =evento.pageY - pantalla.offsetTop;

            if ((x > 0)&&
                (x < 50)&&
                (y > 0)&&
                (y < 50)){
                color = "red";
            }
            else if ((x > 50)&&
                    (x < 100)&&
                    (y > 0)&&
                    (y < 50)){
                    color = "green";
            }
            else if ((x > 100)&&
                    (x < 150)&&
                    (y > 0)&&
                    (y < 50)){
                    color = "blue";
            }
        }


    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }


    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = seleccionarColor;


</script>
1 respuesta

Hola Cristian , espero que estés muy bien.

No logre muito con que quieres decir con tu duda.

El colores se alternan así que hace click en alguna color , eso es lo objetivo del exercercicio.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadIgual muestra en la imagen .

Espero haberte ayudado! Gracias por tu participación =)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios