Esta API 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 del libro 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 vacío, pero con un propósito totalmente diferente.
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 referenciaque retorna podremos aplicar el resto de la API.
DEMOSTRACIÓN
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “CanvasDocuments.html”, para luego presionar el botón Add.
Procedemos a crear una Carpeta llamada “Imágenes” en
nuestro panel de proyectos y agregamos una imagen cualquiera en el contenido de
dicha carpeta.
En la página CanvasDocument.html, en la cabecera del
documento escribiremos:
En el <BODY></BODY>, lo siguiente:
Adentro del <BODY></BODY> Escribiremos los
siguientes Scripts:
clearRect(x, y, width,
height)
Al igual que al dibujar un rectángulo, los 4 parámetros pasados a clearRect
() representan la esquina superior izquierda del rectángulo para borrar, y el
ancho y altura del rectángulo para borrar.
Traslate(X,Y)
Dibuja un rectángulo en las posiciones correspondientes.
Scale(X,Y)
Dibuja un rectángulo, escala al 200%, luego dibuja rectángulo de nuevo
El método CanvasRenderingContext2D.restore
() de la API de Canvas 2D restaura el estado del lienzo guardado más
recientemente abriendo la entrada superior en la pila de estado de dibujo. Si
no hay ningún estado guardado, este método no hace nada.
El método CanvasRenderingContext2D.transform
() de la API Canvas 2D multiplica la transformación actual con la matriz
descrita por los argumentos de este método. Usted es capaz de escalar, rotar,
mover y sesgar el contexto.
Y
corremos la aplicación
Si le damos click al primer botón
Si le damos click al segundo
