Entrar ¿Aún no tienes acceso?
1
respuesta

Cambiar de color

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Interactuando con el usuario y actividad Cambiando de color

por José De Jesús Alcalá Rubio
| 58.9k xp | 50 posts
Auxiliar de operaciones

Así lo resolví:

<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 i = 0;
    var color = ["blue", "red", "green"];
    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        pincel.fillStyle = color[i];
        pincel.beginPath();
        pincel.arc(x, y, 15, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + "," + y);
    }

    pantalla.onclick = dibujarCirculo;

    function elegirColor(color) {

        i = i + 1;

        if (i > 2) {
            i = 0
        }

        return false


        pincel.fillStyle = color[i];


    }

    pantalla.oncontextmenu = elegirColor;

</script>

Este es el resultado:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola José!

Gracias por compartir tu solución para cambiar el color en un canvas. Veo que utilizaste un evento para cambiar el color del círculo dibujado en función del botón del mouse que se presiona.

Sin embargo, noté que en la función elegirColor() estás retornando false antes de cambiar el color del pincel. Esto hace que la función no cambie el color del círculo dibujado.

Para solucionarlo, simplemente debes mover la línea pincel.fillStyle = color[i]; antes del return false;. De esta manera, el color del pincel se actualizará correctamente.

Aquí te dejo el código corregido:

function elegirColor(color) {
  i = i + 1;
  if (i > 2) {
    i = 0
  }
  pincel.fillStyle = color[i];
  return false;
}

¡Espero haber ayudado y buenos estudios!

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