Canvas y Gráficos en JavaScript

El elemento `canvas` de HTML5 proporciona una superficie en blanco en la que se pueden dibujar gráficos, imágenes y animaciones utilizando JavaScript. Vamos a explorar cómo utilizar `canvas` para dibujar gráficos y crear animaciones simples.

1.Configuración del Canvas

Primero, necesitamos agregar un elemento `canvas` a nuestro HTML y obtener su contexto en JavaScript.

HTML

<canvas id="miCanvas" width="800" height="400"></canvas>

JavaSJavaScript 

const canvas = document.getElementById('miCanvas');

const ctx = canvas.getContext('2d');

2.Dibujo Básico en el Canvas

Podemos usar métodos del contexto (`ctx`) para dibujar formas básicas y líneas.

// Dibujar un rectángulo

ctx.fillStyle = 'blue';

ctx.fillRect(50, 50, 100, 80);

// Dibujar una línea

ctx.strokeStyle = 'red';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(200, 50);

ctx.lineTo(300, 150);

ctx.stroke();

3.Dibujar un Círculo

Para dibujar un círculo, podemos usar el método `arc()`.

// Dibujar un círculo

ctx.beginPath();

ctx.arc(400, 100, 30, 0, Math.PI * 2);  // x, y, radio, ángulo inicial, ángulo final

ctx.fillStyle = 'green';

ctx.fill();

4.Dibujar Texto

Podemos agregar texto al canvas con el método `fillText()` o `strokeText()`.

// Dibujar texto

ctx.fillStyle = 'black';

ctx.font = '30px Arial';

ctx.fillText('¡Hola, Mundo!', 100, 200);  // texto, x, y

5.Animaciones en Canvas

Para crear una animación en canvas, utilizamos la función `requestAnimationFrame()` para ejecutar una función de renderizado en cada fotograma.

function animar() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);  // Limpiar el canvas

    // Dibujar y actualizar la posición

    // ...

    requestAnimationFrame(animar);  // Llamada recursiva para continuar la animación

}

// Llamar a la función de animación por primera vez

animar();

6.Ejemplo Completo de Animación

Aquí hay un ejemplo simple de una animación de un objeto moviéndose en el canvas.

let x = 50;

function animar() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'red';

    ctx.fillRect(x, 50, 50, 50);

    x += 2;  // Mover el objeto

    if (x > canvas.width) {

        x = -50;  // Reiniciar si sale de la pantalla

    }

    requestAnimationFrame(animar);

}

animar();

Estos son los conceptos básicos para dibujar gráficos y crear animaciones en canvas utilizando JavaScript. Experimenta con diferentes formas y animaciones para crear experiencias interactivas en tu página web. ¡Diviértete creando!