Cómo dibujar y animar gráficos con lienzo html5

Una de las nuevas partes emocionantes de HTML5 es la lona

elemento. Usando lona, puede dibujar gráficos de mapa de bits dentro de la ventana del navegador. Lo que es aún más impresionante y útil es que se puede escribir un programa que va a dibujar gráficos sobre la marcha dentro de la ventana del navegador.

Cómo lona ¿trabajo?

los lona elemento crea un contenedor, o lienzo, sobre el cual se puede dibujar gráficos. Un ejemplo simple de una lona elemento que crea un área de dibujo cuadrado 300 píxeles se ve así:

Una vez que tenga la lona, usted debe escribir un guión, utilizando javascript, para poner las cosas en el interior del área de dibujo. Imágenes dibujadas dentro de un lona elemento son muy diferentes de las imágenes estáticas que se utilizan tradicionalmente en páginas web, en el que debe crear y cargar los gráficos para el servidor antes de que el navegador los carga en páginas web mediante el img etiqueta.

Imágenes cargado con el img etiqueta no se puede cambiar después de que se muestran en el navegador. Los desarrolladores web tienen cierta capacidad para mover o cambiar el tamaño de las imágenes, pero si se trata de una foto de su gato, por ejemplo, no hay manera de transformarlo en un cuadro de su bicicleta.

Con gráficos, la situación es muy diferente. Debido a que el guión está haciendo el dibujo después de las cargas de la página web, el gráfico puede ser cualquier cosa, y puede ser dibujado muy rápido. lona funciona muy bien para la elaboración de diagramas y gráficos, pero también puede ser usado para manipular las fotografías en tiempo real, o incluso para crear la animación o trabajar con archivos de vídeo.

He aquí un ejemplo sencillo de una función de javascript que dibujar un rectángulo sólido cuando se usa desde dentro de un documento HTML:

función draw () {var lienzo = document.getElementById ('lienzo') - si (canvas.getContext) {var ctx = canvas.getContext ('2d') - ctx.fillRect (25,25,100,100) -}}

¿Qué es la lona bueno?

Debido a su capacidad de manipular gráficos muy rápidamente el uso de programas que puede ser controlado con la entrada del usuario, lona gráficos son ideales para los juegos. Algunos de los juegos más populares creados con lona incluir

• Sinuoso es un simple, pero adictivo, juego en el que controlas a un puntero que se mueve alrededor para evitar puntos rojos y pulsa buenos puntos.

• Canvas Rider es un hermoso juego de desplazamiento 2D donde el control de una figura de palo en una bicicleta, montar a caballo a través de cientos de pistas aportadas por los usuarios.

• ZTYPE es un juego en el que debe escribir palabras a medida que caen hacia usted. A medida que escribe las letras en cada palabra, se les dispara desde el cielo.

lona También es bueno para la creación de gráficos y tablas que se actualizan en tiempo real a partir de datos en vivo, o para permitir a los usuarios manipular gráficos en la web.

Los usos potenciales para HTML5 lona están limitadas sólo por su imaginación y por sus habilidades de programación, por supuesto.

En agosto de 2013, el lona elemento con el apoyo de la mayoría de los navegadores modernos, incluyendo IE9 (y versiones superiores), Firefox, Chrome, Opera y Safari. Tenga en cuenta, sin embargo, que los usuarios que ejecutan mayores o menos comunes los navegadores web probablemente será incapaz de ver o interactuar con lona-gráficos basados.