Canvas HTML5
- Página anterior Atributos de formulario de entrada HTML
- Página siguiente HTML5 SVG
El elemento canvas se utiliza para dibujar gráficos en la página web.
¿Qué es Canvas?
El elemento canvas de HTML5 utiliza JavaScript para dibujar imágenes en la página web.
El lienzo es una región rectangular, donde puede controlar cada píxel.
Canvas tiene varios métodos de dibujo de rutas, rectángulos, círculos, caracteres y agregar imágenes.
Crear el elemento Canvas
Agregar el elemento canvas a la página HTML5.
Especificar el id, el ancho y la altura del elemento:
<canvas id="myCanvas" width="200" height="100"></canvas>
Dibujar con JavaScript
El elemento canvas en sí no tiene capacidad de dibujo. Todas las operaciones de dibujo deben realizarse internamente en JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript utiliza el id para encontrar el elemento canvas:
var c=document.getElementById("myCanvas");
Luego, cree el objeto contexto:
var cxt=c.getContext("2d");
El objeto getContext("2d") es un objeto integrado en HTML5, que posee varios métodos para dibujar rutas, rectángulos, círculos, caracteres y agregar imágenes.
Las siguientes dos líneas de código dibujan un rectángulo rojo:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
El método fillStyle lo pinta en rojo, el método fillRect especifica la forma, posición y dimensiones.
Entender las coordenadas
El método fillRect de arriba tiene como parámetros (0,0,150,75).
Lo que significa: dibuje un rectángulo de 150x75 en el lienzo, comenzando en la esquina superior izquierda (0,0).
Como se muestra en la imagen siguiente, las coordenadas X e Y del lienzo se utilizan para ubicar el dibujo en el lienzo.
Ejemplo: al posicionar el ratón sobre el rectángulo se pueden ver las coordenadas
Más ejemplos de Canvas
A continuación, más ejemplos de dibujo en el elemento canvas:
Ejemplo - Línea
Dibuje una línea especificando desde dónde comenzar y dónde finalizar:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Elemento de lienzo:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento de lienzo. </canvas>
Ejemplo - Círculo
Dibuje un círculo mediante la especificación de dimensiones, colores y posiciones:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Elemento de lienzo:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento de lienzo. </canvas>
Ejemplo - Desvanecimiento
Utilice el color especificado para dibujar el fondo de desvanecimiento:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Elemento de lienzo:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento de lienzo. </canvas>
Ejemplo - Imagen
Coloca una imagen en el lienzo:
Código JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Elemento de lienzo:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Su navegador no admite la etiqueta de lienzo HTML5. </canvas>
Tutoriales de HTML Canvas
Para aprender más sobre el lienzo, visite nuestro Tutoriales de HTML Canvas.
Páginas relacionadas
Manual de referencia:Etiqueta <canvas> HTML 5
Manual de referencia:Objeto Canvas del DOM HTML
- Página anterior Atributos de formulario de entrada HTML
- Página siguiente HTML5 SVG
