Preparando el lienzo
La API Canvas ofrece una de las más poderosas características de HTML5. Permite a desarrolladores trabajar con un medio visual e interactivo para proveer capacidades de aplicaciones de escritorio para la web.
Al comienzo de esta serie de publicaciones hablamos sobre cómo HTML5 está reemplazando previos complementos o plug-ins, como Flash o Java applets, por ejemplo. Había dos cosas importantes a considerar para independizar a la web de tecnologías desarrolladas por terceros: procesamiento de video y aplicaciones gráficas. El elemento <video> y la API para medios cubren el primer aspecto muy bien, pero no hacen nada acerca de los gráficos. La API Canvas se hace cargo del aspecto gráfico y lo hace de una forma extremadamente efectiva. Canvas nos permite dibujar, presentar gráficos en pantalla, animar y procesar imágenes y texto, y trabaja junto con el resto de la especificación para crear aplicaciones completas e incluso video juegos en 2 y 3 dimensiones para la web.
- El elemento <canvas>
Este elemento genera un espacio rectangular vacío en la página web (lienzo) en el cual serán mostrados los resultados de ejecutar los métodos provistos por la API. Cuando es creado, produce sólo un espacio en blanco, como un elemento <div> vacío, pero con un propósito totalmente diferente.
Código 7-1. Sintaxis del elemento <canvas>.
<!DOCTYPE html> <html lang="es"> <head> <title>Canvas API</title> <script src="canvas.js"></script> </head> <body> <section id="cajalienzo"> <canvas id="lienzo" width="500" height="300"> Su navegador no soporta el elemento canvas </canvas> </section> </body> </html>
Solo es necesario especificar unos pocos atributos para este elemento, como puede ver en el Código 7-1. Los atributos width (ancho) y height (alto) declaran el tamaño del lienzo en pixeles. Estos atributos son necesarios debido a que todo lo que sea dibujado sobre el elemento tendrá esos valores como referencia. Al atributo id, como en otros casos, nos facilita el acceso al elemento desde el código Javascript.
Eso es básicamente todo lo que el elemento <canvas> hace. Simplemente crea una caja vacía en la pantalla. Es solo a través de Javascript y los nuevos métodos y propiedades introducidos por la API que esta superficie se transforma en algo práctico.
IMPORTANTE: Por razones de compatibilidad, en caso de que Canvas API no se encuentre disponible en el navegador, el contenido entre las etiquetas <canvas> será mostrado en pantalla.
- getContext()
El método getContext() es el primer método que tenemos que llamar para dejar al elemento <canvas> listo para trabajar. Genera un contexto de dibujo que será asignado al lienzo. A través de la referencia que retorna podremos aplicar el resto de la API.
Código 7-2. Creando el contexto de dibujo para el lienzo.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
}
window.addEventListener("load", iniciar, false);
En el Código 7-2, una referencia al elemento <canvas> fue almacenada en la variable elemento y el contexto de dibujo fue creado por getContext('2d'). El método puede tomar dos valores: 2d y 3d. Esto es, por supuesto, para ambientes de 2 dimensiones y 3 dimensiones. Por el momento solo el contexto 2d está disponible, pero serios esfuerzos están siendo volcados en el desarrollo de una API estable en 3 dimensiones.
El contexto de dibujo del lienzo será una grilla de pixeles listados en filas y columnas de arriba a abajo e izquierda a derecha, con su origen (el pixel 0,0) ubicado en la esquina superior izquierda del lienzo.
Hágalo usted mismo: Copie el documento HTML del Código 7-1 dentro de un nuevo archivo vacío. También necesitará crear un archivo llamado canvas.js y copiar el Código 7-2 en su interior. Cada código presentado en este capítulo es independiente y reemplaza al anterior.
Conceptos básicos: Cuando una variable es declarada dentro de una función sin la palabra clave var, será global. Esto significa que la variable será accesible desde otras partes del código, incluido el interior de funciones. En el Código 7-2, declaramos la variable lienzo como global para poder tener siempre acceso al contexto del lienzo.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario