Gráficos de lienzo HTML
El elemento HTML <canvas>se utiliza para dibujar gráficos en una página web.
El gráfico de la izquierda se crea con <canvas>. Muestra cuatro elementos: un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor y un texto multicolor.
¿Qué es el lienzo HTML?
El elemento HTML <canvas>se utiliza para dibujar gráficos, sobre la marcha, a través de JavaScript.
El <canvas>elemento es solo un contenedor de gráficos. Debe usar JavaScript para dibujar los gráficos.
Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, texto y agregar imágenes.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el
<canvas>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Ejemplos de lienzos
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: Siempre especifique un idatributo (al que se hará referencia en un script) y un atributo widthy heightpara definir el tamaño del lienzo. Para agregar un borde, use el styleatributo.
Aquí hay un ejemplo de un lienzo básico y vacío:
Ejemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Agregar un JavaScript
Después de crear el área del lienzo rectangular, debe agregar un JavaScript para hacer el dibujo.
Aquí hay unos ejemplos:
Dibuja 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>
Dibuja un circulo
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>
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>
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>
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>
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>
Dibujar imagen
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Tutorial de lienzo HTML
Para obtener más información <canvas>, lea nuestro tutorial HTML Canvas .