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:
<canvas>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><canvas> en HTML5Para utilizar la etiqueta <canvas>, debes seguir estos pasos básicos:
<canvas> en tu HTML.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:
<canvas> con un ancho de 300 píxeles y una altura de 150 píxeles con un borde negro.<canvas> usando document.getElementById.getContext('2d').fillRect.<!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:
<canvas> con un ancho y altura de 300 píxeles con un borde negro.arc y luego se rellena utilizando fill.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.