Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

Diseñando con el mouse

Hola, me gustaría saber si voy por buen camino, y si sí, cuál sería el siguiente paso desde aquí?

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

    function dibujarPaleta(x,color) {

        pincel.fillStyle = color;
        pincel.fillRect(x,0,50,50);

    }

    dibujarPaleta(0,"red");
    dibujarPaleta(50,"green");
    dibujarPaleta(100,"blue");

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    function colorActual(evento) {

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

            if ((x < 50) && (y < 50)) {

                alert("red");//aquí el alert lo utilizo solo para comprobar que el on.click esté funcionando

            }



            if ((x > 50) && (x < 100) && (y < 50)) {

                alert("green");


            }



            if ((x > 100) && (x < 150) && (y < 50)) {

                alert("blue");

            }



    }


    pantalla.onclick = colorActual;

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>
4 respuestas

Hola Joan, espero estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir códigos, actividades y ejercicios, creamos un canal en Discord (#compartatucodigo) donde puedes compartir, dar y sugerir mejoras con el resto de tus compañeros.

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

¿Dónde debo poner las dudas?

Cuando tengas dudas específicas sobre el contenido de alguna aula puedes usar el foro.

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

Gracias por compartir tu código, es muy útil para los que iniciamos con la programación.