Solucion cambio de colores | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="600" height="400"></canvas>

    <script>
      var pantalla = document.querySelector("canvas");
      var pincel = pantalla.getContext("2d");
      var colores = ["blue", "red", "green"];
      var control = 0;

      pincel.fillStyle = "grey";
      pincel.fillRect(0, 0, 600, 400);

      function exibirAlerta(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento);
        alert(`${x} y ${y}`);
      }

      function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        pincel.fillStyle = colores[control];
        pincel.beginPath();
        pincel.arc(x, y, 50, 0, 2 * 3.14);
        pincel.fill();
        console.log(`${x} y ${y}`);

      }

      pantalla.onclick = dibujarCirculo;

      function alterarColor() {
        control++;
        if(control>=colores.length){
            control = 0;
        }

        return false;
      }

      pantalla.oncontextmenu = alterarColor;
    </script>
  </body>
</html>

Hola Abel, espero que estés bien.

Gracias por la dedicación y felicidades por el avance en tus estudios en lógica de programación, espero que nuestros cursos sean de gran aporte para tu desarrollo profesional y personal.

Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso de que desees compartir tus ejercicios o actividades, dispusimos en Discord un canal exclusivo para ese fin.

Te dejo este link que muestra donde puedes compartir tus actividades y si necesitas ayuda acerca del contenido de los cursos, aquí estaremos. :)

¡Saludos!

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