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

Ejercicio Final

En mi ejercicio final cree una función para el cambio de color que captura el evento del click y limité el espacio donde se dibujan los círculos cuando se desplaza el mause.

  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <canvas width="600" height="400"></canvas>
    <script>
      var pantalla = document.querySelector("canvas");
      var pincel = pantalla.getContext("2d");
      var color = "blue";

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

      pincel.fillStyle = "red";
      pincel.fillRect(0, 0, 50, 50);
      pincel.fillStyle = "green";
      pincel.fillRect(0, 50, 50, 50);
      pincel.fillStyle = "blue";
      pincel.fillRect(0, 100, 50, 50);

      var puedoDibujar = false;
      function cambiarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (x < 50) {
          if (y < 50) {
            color = "red";
          } else if (y > 50 && y < 100) {
            color = "green";
          } else if (y > 100 && y < 150) {
            color = "blue";
          }
        }
      }
      pantalla.onclick = cambiarColor;

      function dibujarCirculo(evento) {
        if (puedoDibujar) {
          var x = evento.pageX - pantalla.offsetLeft;
          var y = evento.pageY - pantalla.offsetTop;
          if (x > 55) {
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
          }
        }
      }
      pantalla.onmousemove = dibujarCirculo;
      function habilitarDibujar() {
        puedoDibujar = true;
      }
      function deshabilitarDibujar() {
        puedoDibujar = false;
      }
      pantalla.onmousedown = habilitarDibujar;
      pantalla.onmouseup = deshabilitarDibujar;
    </script>
  </body>
</html>
1 respuesta

Hola Heber, espero que esté bien.

Gracias por compartir tu código con nosotros y está muy buena su solución para el ejercicio final!

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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