ahora que tenemos nuestro archivo HTML y JavaScript configurados para usar <canvas>, es el momento perfecto para adentrarnos en la estructura y sintaxis básica del elemento <canvas> en HTML5. Esta comprensión fundamental es crucial para avanzar en la creación de gráficos más complejos y animaciones.
<canvas>El elemento <canvas> es un contenedor en el cual puedes usar JavaScript para dibujar gráficos en el navegador. A diferencia de otros elementos HTML que pueden contener texto o elementos hijos, <canvas> solo tiene atributos y es totalmente controlado por JavaScript para el dibujo de gráficos.
width y height: Estos atributos definen el tamaño del área de dibujo en el canvas. Si no se especifican, el canvas por defecto tendrá un tamaño de 300 píxeles de ancho y 150 píxeles de alto.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Lienzo de Canvas</title>
</head>
<body>
<!-- Definición del elemento canvas en HTML -->
<canvas id="miCanvas" width="800" height="600">
Tu navegador no soporta el elemento canvas.
</canvas>
<script src="script.js"></script>
</body>
</html>
<canvas>: Define el lienzo donde vas a dibujar. Los atributos width y height especifican el tamaño del área de dibujo en píxeles. Es importante definir estos atributos para controlar el espacio de trabajo de tus gráficos.id: Usado para identificar el elemento en el documento HTML, lo cual es crucial para poder referenciarlo y manipularlo con JavaScript.<canvas> (en este caso, «Tu navegador no soporta el elemento canvas») solo se mostrará si el navegador del usuario no es compatible con el elemento <canvas>.Una vez que has definido tu elemento <canvas> en HTML, necesitas usar JavaScript para dibujar o manipular el lienzo.
// Selecciona el elemento canvas por su ID
var canvas = document.getElementById('miCanvas');
// Obtiene el contexto de dibujo 2D, que proporciona las funciones de dibujo
var ctx = canvas.getContext('2d');
// Usar el contexto para dibujar un rectángulo simple
ctx.fillStyle = 'red'; // Define el color del relleno
ctx.fillRect(20, 20, 150, 100); // Dibuja un rectángulo (x, y, ancho, alto)
Vamos a aprender a dibujar formas simples como rectángulos, líneas y círculos utilizando el elemento <canvas> de HTML5. Estas son las habilidades básicas que te permitirán crear gráficos más complejos a medida que avanzas.
Empecemos con algo básico: dibujar rectángulos. Hay dos maneras principales de dibujar rectángulos en Canvas: fillRect(x, y, width, height) para rectángulos llenos de color, y strokeRect(x, y, width, height) para rectángulos solo con borde.
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
// Establece el color de relleno
ctx.fillStyle = 'blue';
// Dibuja un rectángulo relleno
ctx.fillRect(20, 20, 150, 100); // fillRect(x, y, width, height)
// Establece el color del borde
ctx.strokeStyle = 'red';
// Establece el ancho del borde
ctx.lineWidth = 5;
// Dibuja un rectángulo con borde
ctx.strokeRect(200, 20, 150, 100); // strokeRect(x, y, width, height)
Dibujar líneas implica mover el «pincel» a un punto inicial y luego trazar una línea hasta un punto final.
// Comienza un nuevo camino
ctx.beginPath();
// Establece el punto inicial
ctx.moveTo(50, 150); // moveTo(x, y)
// Dibuja una línea hasta el punto final
ctx.lineTo(200, 150); // lineTo(x, y)
// Establece el color de la línea
ctx.strokeStyle = 'green';
// Dibuja la línea
ctx.stroke();
Para dibujar círculos o arcos, utilizamos el método arc(x, y, radius, startAngle, endAngle, anticlockwise).
// Comienza un nuevo camino
ctx.beginPath();
// Dibuja un círculo completo
ctx.arc(150, 300, 50, 0, Math.PI * 2); // arc(x, y, radius, startAngle, endAngle)
// Establece el color de relleno del círculo
ctx.fillStyle = 'purple';
// Rellena el círculo
ctx.fill();
Continuemos nuestro curso sobre HTML5 Canvas explorando cómo aplicar colores y estilos a nuestras formas y dibujos. Este conocimiento te permitirá personalizar tus gráficos, hacerlos más atractivos visualmente y adaptarlos a diferentes necesidades de diseño.
El color en Canvas se puede aplicar de varias maneras, principalmente a través de los atributos fillStyle y strokeStyle.
fillStyle: Se usa para establecer el color, gradiente o patrón utilizado para el relleno de formas.strokeStyle: Se usa para establecer el color, gradiente o patrón utilizado para el borde de las formas.Para aplicar un color sólido a una forma, simplemente asigna un color al fillStyle o strokeStyle. Puedes usar colores CSS como nombres de colores, valores hexadecimales, RGB, RGBA, HSL o HSLA.
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
// Aplicando color de relleno
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // Rojo con transparencia
ctx.fillRect(10, 10, 100, 100);
// Aplicando color de borde
ctx.strokeStyle = '#00FF00'; // Verde en formato hexadecimal
ctx.lineWidth = 5;
ctx.strokeRect(120, 10, 100, 100);
Canvas te permite crear dos tipos de gradientes: lineales y radiales.
// Creando un gradiente lineal
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'blue'); // Inicio del gradiente
gradient.addColorStop(1, 'white'); // Fin del gradiente
// Aplicando el gradiente
ctx.fillStyle = gradient;
ctx.fillRect(10, 120, 210, 100);
// Creando un gradiente radial
var radialGradient = ctx.createRadialGradient(150, 300, 20, 150, 300, 100);
radialGradient.addColorStop(0, 'yellow'); // Color del centro
radialGradient.addColorStop(1, 'green'); // Color del borde
// Aplicando el gradiente radial
ctx.fillStyle = radialGradient;
ctx.arc(150, 300, 100, 0, Math.PI * 2);
ctx.fill();
También puedes utilizar imágenes para crear patrones de relleno. Para ello, necesitas cargar una imagen y usarla como patrón en el contexto del canvas.
var img = new Image();
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 300);
};
img.src = 'url_de_tu_imagen.jpg'; // Asegúrate de tener permisos para usar la imagen
Además del color y el patrón, puedes personalizar las líneas con varios estilos:
lineWidth: Define el ancho de las líneas.lineCap: Define cómo son los extremos de las líneas (butt, round, square).lineJoin: Define cómo se unen las líneas (bevel, round, miter).
ctx.lineWidth = 8;
ctx.lineCap = 'round'; // Extremos redondeados
ctx.lineJoin = 'bevel'; // Uniones biseladas
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(150, 350);
ctx.lineTo(250, 250);
ctx.stroke();
