Canvas - una introducción
La etiqueta <canvas> se utiliza para dibujar gráficos. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan <canvas>.
El canvas cuenta con varias métodos() y propiedades. A continuación algunas de ellas.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| width | canvas.width | Determina (sets) o devuelve (returns) la anchura del canvas | 300 |
| height | canvas.height | Determina (sets) o devuelve (returns) la altura del canvas | 150 |
| getContext() | canvas.getContext("2d"); | Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas. | |
| toDataURL() | canvas.toDataURL(tipo); | Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen. | image/png |
Vea la chuleta con las propiedades y metodos() de canvas.
Sin embargo, el elemento <canvas> no tiene habilidad de dibujo en sí mismo, siendo sólo un contenedor para gráficos. Por esto es importante que el <canvas> tenga asignado un id, ya que habrá que manipularlo a través de JavaScript. Utilizaremos document.getElementById para encontrar el canvas.
El método getContext() devuelve un objeto ( puede llamar este objeto como quiera; a continuación lo llamaremos ctx ) que proporciona métodos() y propiedades para dibujar en el canvas.
window.onload = function() {
// encuentre el canvas para dibujar.
var canvas = document.getElementById("Canvas1");
// si existe el canvas y si tiene el método getContext
if (canvas && canvas.getContext) {
// utilice el método getContext para recuperar el contexto del canvas
var ctx = canvas.getContext("2d");
// y si tenemos contexto
if (ctx) {
// dibujamos
}
}
}
El sistema de coordenadas
Para dibujar necesitaremos saber las coordenadas x e y de los puntos utilizados. Por ejemplo el código para dibujar un rectángulo es rect(x,y,w,h), donde x e y son las coordenadas de la esquina izquierda arriba, w es la anchura y h es la altura del rectángulo.
En el <canvas>:
- El punto cuyas coordenadas son: x=0; y=0; se corresponde con la esquina izquerda arriba del canvas.
- Abajo en la esquina derecha x=canvas.width; y=canvas.height;.
Pase el ratón sobre el siguiente <canvas> para ver sus coordenadas x e y:
Pase por encima del canvas para obtener la posición actual del ratón.