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

[Proyecto] 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 puedoDibujar = false;
    var colorActual = "blue"

    function dibujarCirculo(evento,color) {

        if(puedoDibujar && (evento.pageX - pantalla.offsetLeft > 155 || evento.pageY - pantalla.offsetTop > 55)) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * Math.PI);
            pincel.fill();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    function dibujarCuadrado(x,y,color) {
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50);
        pincel.fill();   
    }

    function dibujarPaleta() {
        dibujarCuadrado(0,0,"red");
        dibujarCuadrado(50,0,"green");
        dibujarCuadrado(100,0,"blue"); 
    }

    dibujarPaleta()


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

        if (( x >= 0 && x < 50) && ( y >= 0 && y < 50)) {
            colorActual = "red";
            console.log("rojo");
            console.log(x + "," + y);   
        } 

        else if(( x >= 50 && x < 100) && ( y >= 0 && y < 50)){
            colorActual = "green";
            console.log("verde");
            console.log(x + "," + y);    
        }

        else if(( x >= 100 && x < 150) && ( y >= 0 && y < 50)){
            colorActual = "blue";
            console.log("azul");
            console.log(x + "," + y);  
        }

    }

    pantalla.onclick = elegirColor

</script>
1 respuesta

Hola, Dayana!

¡Practicar lo que se ha aprendido en clase es sin duda la mejor manera de fijar el conocimiento!

Te recomiendo que puedes interactuar con el resto de nuestros compañero por nuestro Discord, en virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo sea por el Discord, con certeza por ahí llegará a más personas.

Un saludo!

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