Definición destacada
¿Como funciona el comando en HTML5: 'canvas'?
Última modificación: 2024-06-18
La etiqueta <canvas> en HTML5 se utiliza para dibujar gráficos mediante secuencias de comandos (por lo general, JavaScript). Es un contenedor gráfico que se puede utilizar para renderizar gráficos en tiempo real, como gráficos 2D y 3D (con WebGL). Aquí se detallan los atributos de esta etiqueta:
Atributos de la Etiqueta <canvas>
- width: Especifica el ancho del área de dibujo en píxeles. El valor predeterminado es 300 píxeles.
-
height: Especifica la altura del área de dibujo en píxeles. El valor predeterminado es 150 píxeles.
<canvas id="miCanvas" width="200" height="100"></canvas>
Uso de <canvas> en HTML5
Para utilizar la etiqueta <canvas>, debes seguir estos pasos básicos:
- Incluir la etiqueta
<canvas>en tu HTML. - Usar JavaScript para acceder al contexto del lienzo y dibujar sobre él.
Ejemplo Básico de Uso
Código HTML y JavaScript para dibujar un rectángulo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Canvas</title>
</head>
<body>
<canvas id="miCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
// Obtener el elemento canvas
var canvas = document.getElementById('miCanvas');
// Obtener el contexto del canvas
var ctx = canvas.getContext('2d');
// Dibujar un rectángulo
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>En este ejemplo:
- Se crea un
<canvas>con un ancho de 300 píxeles y una altura de 150 píxeles con un borde negro. - En JavaScript, se accede al elemento
<canvas>usandodocument.getElementById. - Luego se obtiene el contexto de dibujo en 2D mediante
getContext('2d'). - Utilizando el contexto, se dibuja un rectángulo rojo con la función
fillRect.
Ejemplo de Dibujar un Círculo
<!DOCTYPE html>
<html>
<head>
<title>Dibujo de Círculo</title>
</head>
<body>
<canvas id="miCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script>
// Obtener el elemento canvas
var canvas = document.getElementById('miCanvas');
// Obtener el contexto del canvas
var ctx = canvas.getContext('2d');
// Dibujar un círculo
ctx.beginPath();
ctx.arc(150, 150, 70, 0, 2 * Math.PI); // (x, y, radio, ángulo inicial, ángulo final)
ctx.fillStyle = 'blue';
ctx.fill();
</script>
</body>
</html>En este ejemplo:
- Se crea un
<canvas>con un ancho y altura de 300 píxeles con un borde negro. - En JavaScript, se obtiene el contexto 2D.
- Se dibuja un círculo azul con la función
arcy luego se rellena utilizandofill.
Estos ejemplos ilustran cómo se puede usar la etiqueta <canvas> para crear gráficos simples en HTML5. La potencia de <canvas> radica en su capacidad para renderizar gráficos complejos y dinámicos mediante script, lo que lo convierte en una herramienta poderosa para desarrolladores web.