HTML Canvas Gráficos
El elemento HTML <canvas> se utiliza para dibujar gráficos en una página web.
El gráfico de la izquierda se creó con <canvas>. Muestra cuatro elementos: un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor y un texto multicolor.
¿Qué es HTML Canvas?
El elemento HTML <canvas> se utiliza para dibujar gráficos, sobre la marcha, a través de JavaScript.
El elemento <canvas> es solo un contenedor para gráficos. Debes utilizar JavaScript para dibujar los gráficos.
Canvas tiene varios métodos para dibujar trazados, cuadros, círculos, texto y agregar imágenes.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento <canvas>.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Ejemplos de lienzo
Un lienzo es un área rectangular en una página HTML. De forma predeterminada, un lienzo no tiene borde ni contenido.
El marcado se ve así:
<canvas id="myCanvas" width="200" height="100"></canvas>
Nota: Especifique siempre un atributo id (al que se hará referencia en un script) y un width y el atributo height para definir el tamaño del lienzo. Para agregar un borde, use el atributo style.
Aquí hay un ejemplo de un lienzo vacío básico:
Ejemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</canvas>
Inténtalo tú mismo »
Añadir JavaScript
Después de crear el área del lienzo rectangular, debes agregar un JavaScript para realizar el dibujo.
Aquí hay algunos ejemplos:
Dibujar una línea
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Inténtalo tú mismo »
Dibuja un círculo
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Inténtalo tú mismo »
Dibujar un texto
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Inténtalo tú mismo »
Texto de trazo
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Inténtalo tú mismo »
Dibujar degradado lineal
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Inténtalo tú mismo »
Dibujar degradado circular
Ejemplo
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Inténtalo tú mismo »
Dibujar imagen
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Inténtalo tú mismo »
HTML Tutorial de lienzo
Para obtener más información sobre <canvas>, lea nuestro Tutorial de Canvas HTML.
