Dominando los gráficos del canvas de HTML

Introducción

La etiqueta HTML <canvas> se utiliza para dibujar gráficos y otros elementos visuales en una página web. Esta etiqueta proporciona una plataforma para que los desarrolladores creen juegos, imágenes y animaciones utilizando JavaScript. El elemento canvas viene con varios atributos que le permiten manipular el tamaño, la opacidad y la apariencia del canvas.

En este laboratorio, exploraremos cómo utilizar la etiqueta <canvas> en HTML para crear gráficos, agregar animaciones y manipular formas y texto utilizando JavaScript.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Creando un canvas simple

Vamos a crear un canvas simple utilizando la etiqueta <canvas> sin ningún contenido. En el archivo index.html, escribe el siguiente código:

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

Guarda el archivo y ábralo en tu navegador. Notarás un área en blanco en la página, que es nuestro canvas con un ancho predeterminado de 300px y un alto de 150px.

Agregando estilos al canvas

Podemos agregar estilos a nuestro canvas utilizando el atributo style. Vamos a agregar un borde a nuestro canvas para que sus límites sean visibles.

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Guarda el archivo y actualiza tu navegador para ver el resultado.

Creando formas en el canvas

Ahora agreguemos algunos gráficos a nuestro canvas. Para hacer esto, necesitamos utilizar JavaScript. Podemos utilizar el método getContext() para obtener un contexto de dibujo 2D de nuestro canvas y realizar varias operaciones sobre él.

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

En el código anterior, primero obtenemos el elemento canvas por su ID myCanvas, y luego obtenemos un contexto de dibujo 2D utilizando getContext(). Luego establecemos la propiedad fillStyle en "rojo" para llenar el rectángulo con un color rojo. Finalmente, dibujamos el rectángulo utilizando el método fillRect().

Guarda el archivo y actualiza tu navegador para ver el resultado.

Agregando texto al canvas

Vamos a agregar un poco de texto a nuestro canvas utilizando JavaScript.

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

En el código anterior, primero obtenemos el elemento canvas por su ID myCanvas, y luego obtenemos un contexto de dibujo 2D utilizando getContext(). Luego establecemos la propiedad font en "30px Arial" y la propiedad fillStyle en "azul". Finalmente, agregamos el texto "Hello World" utilizando el método fillText().

Guarda el archivo y actualiza tu navegador para ver el resultado.

Animando gráficos en el canvas

También podemos crear animaciones en el canvas utilizando JavaScript y la etiqueta HTML <canvas>. Vamos a crear una animación de un rectángulo en movimiento en nuestro canvas.

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

En el código anterior, primero obtenemos el elemento canvas por su ID myCanvas, y luego obtenemos un contexto de dibujo 2D utilizando getContext(). Luego declaramos algunas variables x e y para almacenar la posición de nuestro rectángulo. También declaramos la variable dx para mover el rectángulo a lo largo del eje x.

Luego creamos una función animate() para dibujar el rectángulo en la pantalla. Utilizamos el método clearRect() para borrar los dibujos anteriores en el canvas en cada fotograma. Luego llenamos el rectángulo con un color rojo utilizando el método fillRect().

Luego comprobamos si el rectángulo ha alcanzado los límites del canvas, y si es así, cambiamos la dirección del movimiento cambiando el valor de dx.

Finalmente, llamamos al método requestAnimationFrame() para crear un bucle de animación.

Guarda el archivo y actualiza tu navegador para ver el rectángulo animado.

Resumen

En este laboratorio, aprendimos cómo utilizar la etiqueta HTML <canvas> para crear gráficos y animaciones en una página web. También aprendimos cómo manipular el tamaño, la opacidad y la apariencia del canvas utilizando atributos y estilos. Agregamos formas, texto y animaciones al canvas utilizando JavaScript y el método getContext().

Dibujo gráfico en HTML

Introducción

Creando un canvas simple

Agregando estilos al canvas

Creando formas en el canvas

Agregando texto al canvas

Animando gráficos en el canvas

Resumen