Introducción a en HTML – Developing in Spanish

El elemento <canvas> de HTML es una poderosa herramienta para dibujar gráficos y animaciones directamente en la página web usando JavaScript. Con <canvas>, puedes crear desde gráficos simples, como líneas y círculos, hasta imágenes y animaciones complejas. En este tutorial, exploraremos los conceptos básicos de su uso, y aprenderemos a dibujar diferentes formas y crear animaciones sencillas.

#Ad https://amzn.to/3XRUvrz

¿Qué es el elemento `<canvas>`?

<canvas> es un contenedor que define un área rectangular en una página web en la cual puedes dibujar utilizando JavaScript. Sin embargo, por sí mismo no dibuja nada. Para agregar contenido al área del lienzo, necesitas usar el contexto de dibujo del canvas, que te da acceso a una API rica para dibujar gráficos.

Crear un elemento `<canvas>`

Para empezar, debes incluir un elemento <canvas> en tu documento HTML. Este es el código básico:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas básico</title>
</head>
<body>
    <canvas id="miCanvas" width="500" height="500" style="border: 1px solid black;"></canvas>
</body>
</html>

En este código, hemos creado un <canvas> con un ancho de 500 píxeles y un alto de 500 píxeles. La propiedad style="border: 1px solid black;" simplemente agrega un borde negro alrededor del canvas para que podamos ver el área del lienzo.

Accediendo al Contexto del Canvas

Una vez que tienes el elemento <canvas> en tu página HTML, debes usar JavaScript para acceder a su contexto y comenzar a dibujar. El contexto más común es el 2D, el cual te permite dibujar gráficos bidimensionales.

Para obtener el contexto, debes seguir estos pasos:

<script>
    const canvas = document.getElementById('miCanvas');
    const contexto = canvas.getContext('2d');
</script>

Con este código, hemos almacenado el elemento <canvas> en la variable canvas, y luego hemos obtenido su contexto 2D con el método getContext('2d'). A partir de aquí, podemos utilizar el objeto contexto para dibujar en el canvas.

Dibujando en el Canvas

1. Dibujar un Rectángulo

Una de las formas más simples que puedes dibujar en un canvas es un rectángulo. Hay dos formas principales de hacerlo:

fillRect(x, y, width, height): Dibuja un rectángulo relleno.
strokeRect(x, y, width, height): Dibuja solo el contorno de un rectángulo.

<script>
    const canvas = document.getElementById('miCanvas');
    const contexto = canvas.getContext('2d');

    // Dibuja un rectángulo relleno
    contexto.fillStyle = 'blue'; // Color de relleno
    contexto.fillRect(50, 50, 100, 100);

    // Dibuja un rectángulo con contorno
    contexto.strokeStyle = 'red'; // Color del contorno
    contexto.strokeRect(200, 50, 100, 100);
</script>

En este código:

fillStyle establece el color de relleno.
strokeStyle establece el color del contorno.

El primer rectángulo es azul y está relleno, mientras que el segundo solo tiene un borde rojo.

2. Dibujar Líneas

Para dibujar líneas en un canvas, necesitas seguir una secuencia de comandos. Las funciones clave son:

beginPath(): Inicia un nuevo camino o ruta de dibujo.
moveTo(x, y): Mueve el lápiz a un nuevo punto sin dibujar.
lineTo(x, y): Dibuja una línea desde el punto actual hasta el nuevo punto.
stroke(): Dibuja el contorno de la ruta.

Ejemplo:

<script>
    const canvas = document.getElementById('miCanvas');
    const contexto = canvas.getContext('2d');

    // Dibujar una línea
    contexto.beginPath(); // Inicia una nueva ruta
    contexto.moveTo(50, 200); // Punto de inicio
    contexto.lineTo(300, 200); // Dibuja la línea hacia este punto
    contexto.strokeStyle = 'green'; // Color de la línea
    contexto.lineWidth = 5; // Ancho de la línea
    contexto.stroke(); // Dibuja la línea
</script>

Este código dibuja una línea verde con un ancho de 5 píxeles.

3. Dibujar un Círculo

Dibujar un círculo en un canvas es un poco más complejo que dibujar un rectángulo o una línea, pero sigue siendo sencillo. La función clave aquí es arc().

arc(x, y, radius, startAngle, endAngle, anticlockwise): Dibuja un arco o un círculo completo. Los parámetros son:
x e y: Las coordenadas del centro del círculo.
radius: El radio del círculo.
startAngle y endAngle: Los ángulos de inicio y fin del arco en radianes.
anticlockwise: Un valor booleano que indica si el arco debe ser dibujado en sentido antihorario.

Ejemplo:

<script>
    const canvas = document.getElementById('miCanvas');
    const contexto = canvas.getContext('2d');

    // Dibujar un círculo
    contexto.beginPath();
    contexto.arc(150, 350, 50, 0, Math.PI * 2, false); // Círculo completo
    contexto.fillStyle = 'purple';
    contexto.fill(); // Rellena el círculo
</script>

En este ejemplo, hemos dibujado un círculo púrpura con un radio de 50 píxeles.

Animaciones Básicas en Canvas

Uno de los aspectos más interesantes del canvas es la posibilidad de crear animaciones. Puedes hacerlo cambiando gradualmente las propiedades de los objetos que dibujas y volviendo a dibujar el canvas en un ciclo.

Para crear una animación básica, puedes usar la función requestAnimationFrame(), que permite actualizar el canvas a una velocidad óptima.

Ejemplo de animación de un círculo en movimiento:

<script>
    const canvas = document.getElementById('miCanvas');
    const contexto = canvas.getContext('2d');

    let x = 50; // Posición inicial
    let velocidad = 2; // Velocidad de movimiento

    function dibujarCirculo() {
        // Limpia el canvas
        contexto.clearRect(0, 0, canvas.width, canvas.height);

        // Dibuja el círculo
        contexto.beginPath();
        contexto.arc(x, 150, 30, 0, Math.PI * 2, false);
        contexto.fillStyle = 'orange';
        contexto.fill();

        // Actualiza la posición del círculo
        x += velocidad;

        // Si el círculo alcanza los bordes, cambia la dirección
        if (x > canvas.width - 30 || x < 30) {
            velocidad = -velocidad;
        }

        // Llama a la función de nuevo para animar
        requestAnimationFrame(dibujarCirculo);
    }

    // Inicia la animación
    dibujarCirculo();
</script>

En este ejemplo, el círculo se moverá de izquierda a derecha y rebotará cuando llegue a los bordes del canvas. El método clearRect() se utiliza para borrar el canvas antes de redibujar el círculo en su nueva posición.

Conclusión

El elemento <canvas> es una herramienta poderosa que, con la ayuda de JavaScript, te permite crear gráficos dinámicos y animaciones en tu página web. En este tutorial, hemos cubierto los conceptos básicos: dibujar rectángulos, líneas, círculos y crear animaciones simples. A partir de aquí, puedes experimentar con más formas, colores, y efectos avanzados como imágenes y transformaciones. ¡Las posibilidades son prácticamente infinitas!

¿Qué es el elemento <canvas>?

Crear un elemento <canvas>