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 puedes 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 HTML5 integrado 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, y el método fillRect especifica la forma, posición y tamaño.
Entender las coordenadas
El método fillRect de arriba tiene los parámetros (0,0,150,75).
Esto 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 posar 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 el punto de inicio y final:
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 canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento canvas. </canvas>
Ejemplo - Círculo
Dibuje un círculo especificando el tamaño, color y posición:
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 canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento canvas. </canvas>
Ejemplo - Degradado
Dibuje un fondo degradado usando el color especificado:
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 canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Su navegador no admite el elemento canvas. </canvas>
Ejemplo - Imagen
Coloque 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 canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Su navegador no admite la etiqueta HTML5 canvas. </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 de DOM HTML
- Página anterior Atributos de formulario de entrada HTML
- Página siguiente HTML5 SVG
