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

Diseñando con el mouse

<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 dibujar = false;

    var cord = 0;
    var ycord = 0;
    var tamanoCuadrados = 50;
    var colordefault = "blue";

    function dibujarCirculo(x,y,colordefault ) {

        if(dibujar) {

            pincel.fillStyle = colordefault;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * Math.PI);
            pincel.fill();

        }
    }


    function dibujarCuadrado(x, y, tamano, color) {

        pincel.fillStyle = color;
        pincel.fillRect(x, y, tamano, tamano)
        pincel.fill();

    }

    function paleta() {

        dibujarCuadrado(cord, ycord, tamanoCuadrados, 'red');
        dibujarCuadrado(cord + 50, ycord, tamanoCuadrados, 'green');
        dibujarCuadrado(cord + 100, ycord, tamanoCuadrados, 'blue');

    }

    function siDibujar() {

        dibujar = true;

    }

    function noDibujar() {

        dibujar = false;

    }

    function AreaCuadrado(xCoordenada,yCoordenada){

        if ((xCoordenada >= 0 && xCoordenada < (3*tamanoCuadrados+5)) && 
            (yCoordenada >=0 && yCoordenada < (tamanoCuadrados+5))) {

            return false;

        } else{

            return true;

        }

    }    

    function movMouse(evento){

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

        if (AreaCuadrado(x,y)){

                dibujarCirculo(x,y,colordefault);

        }

    }

    function seleccionarColor(evento) {

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

        if (y > ycord && y < (ycord + tamanoCuadrados)) {

            if(x > cord && x < (cord + tamanoCuadrados)) {

                colordefault = "red";
                console.log(colordefault);

            } else if (x > cord+50 && x < (cord +50 + tamanoCuadrados)) {

                colordefault = "green";
                console.log(colordefault);

            } else if(x > cord + 100 && x < (cord + 100 + tamanoCuadrados)) {

                colordefault = "blue";
                console.log(colordefault);

            }            


        }


    }

    pantalla.onmousemove = movMouse;

    pantalla.onmousedown = siDibujar;

    pantalla.onmouseup = noDibujar;

    paleta();

    pantalla.onclick = seleccionarColor;


</script>
1 respuesta

¡Hola, Jesus! Deseo que esté bien.

Muchas gracias por compartir tu proyecto con nosotros. Estamos muy contentos de poder acompañarte en tu camino de aprendizaje.

En lo esencial, en el foro estamos priorizando las dudas y errores.

Para compartir tus proyectos con nosotros y otros estudiantes, te recomiendo que lo haga en nuetro servidor de Discord. Allí tenemos un canal exclusivo para eso (⛓┇comparte-tu-codigo-logica).

Continúa con tus estudios y hasta la proxima.

¡Vamos juntos!

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