Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Diseñando con el mouse con distintos colores

Creo que esta es la primera actividad que me sale bien sin ver la opinión del instructor. Me siento listo jaja

<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function dibujarCuadrado(x, y, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50);
    }

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

 var puedoDibujar = false;

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

}
var colores = ["red", "green", "blue"];
var indiceDeColores = 0;

function cambiarColor(evento) {

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

    if ((x < 49) && (y < 49)) {
        x = indiceDeColores = 0;
    }
    if ((x >= 50) && (x < 99) && (y < 49)) {
        x = indiceDeColores = 1;
    }
    if ((x >= 100) && (x < 150) && (y < 49)) {
        x = indiceDeColores = 2;
    }


    if(indiceDeColores>= colores.length) {
        indiceDeColores = 0;
    }
    return false;
}

pantalla.onclick = cambiarColor;
pantalla.onmousemove = dibujarCirculo;

function habilitarDibujar() {
    puedoDibujar = true;
}

function deshabilitarDibujar() {
    puedoDibujar = false;
}

pantalla.onmousedown = habilitarDibujar;

pantalla.onmouseup = deshabilitarDibujar;
</script>

lo único que no pensé fue en una función para no graficar encima de la paleta, es un Frankenstein de código jaja

1 respuesta
solución!

Hola Fabricio, espero estés muy bien.

Estamos muy contentos con tu evolución, y puedes contar con nuestro apoyo para evolucionar aún más.

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

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, 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