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.