Cómo dibujar y animar gráficos con canvas de html5

Una de las nuevas piezas interesantes de HTML 5 es el lona elemento. Utilizando lona, se puede dibujar gráficos de mapas 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í:

Video: Etiqueta Canvas de HTML5. Gráficos dinámicos. 1/2

Una vez que tenga la lona, debe escribir una secuencia de comandos, utilizando javascript, para poner las cosas en el interior del área de dibujo. Imágenes dibujadas en el interior de una lona elemento son muy diferentes de las imágenes estáticas que se utilizan tradicionalmente en las 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 utilizando el img etiqueta.

Las imágenes cargadas 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 es 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. Porque el guión está haciendo el dibujo después de que se carga 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 tablas y gráficos, pero también puede ser usado para manipular 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 javascript que dibujar un rectángulo sólido cuando se usa desde el interior 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) -}}

Lo que es bueno para la lona?

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 los 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 donde el control de un puntero que se mueve alrededor para evitar puntos rojos y pulsa buenos puntos.

• jinete de la lona es un hermoso juego de desplazamiento 2D donde el control de una figura de palo en una bicicleta, montar a caballo durante cientos de pistas enviadas por los usuarios.

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

  Video: Canvas y SVG para dibujar en HTML5

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

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

A partir de agosto de 2013, el lona elemento es apoyada por 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 utilicen navegadores antiguos o menos comunes, probablemente será incapaz de ver o interactuar con lona-gráficos basados.