Canvas and Games

2013

UAI – Universidad Abierta Interamericana

Bárbara Dalonso
Lucas Viñals



[CANVAS AND GAMES]

Trabajo Práctico Nº 1








 
Contenido
¿Qué ofrece el uso de Canvas en HTML5? 3
¿Cómo se relaciona el Canvas con el desarrollo de juegos en HTML5? 3
¿Cuál es el soporte de los navegadores actuales para el uso de Canvas? 3
Cómo es lasemántica para utilizar esta etiqueta? Ejemplo usando jsfiddle.net. 4
¿Cuáles son los métodos con los que disponemos para poder realizar gráficos dentro del canvas? 6
Escala (x,y) 6
drawImage() 6
createPattern() 6
createRadialGradient() 7
createLinearGradient() 7
arc() 7
rect() 7
fill() 7
arcTo() 7































¿Qué ofrece el uso de Canvas enHTML5?
Canvas es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos y animaciones.
Posee dos atributos width (ancho) y height (alto).
El objeto canvas puede ser accedido a través de Javascript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes.
Canvas permite elrenderizado de gráficos en un bitmap dependiente de la resolución. En canvas se pueden dibujar líneas, rectángulos, arcos, curvas Bézier, imágenes, vídeo y demás cosas en modo inmediato, es decir, los gráficos se realizan directamente contra el hardware gráfico, lo que la hace ideal para entregar gráficos en tiempo real, animaciones o juegos interactivos.

¿Cómo se relaciona el Canvas con eldesarrollo de juegos en HTML5?

Para dibujar sobre el canvas se utilizan los contextos. Actualmente existen dos contextos: Contexto 2D y WebGL. El API del primero se está desarrollando en su propia especificación, dado el tamaño de la misma, fuera de HTML5.

Canvas puede usarse para crear una gran variedad de juegos web. Es una eficaz herramienta de desarrollo porque funciona en immediate modey representa los gráficos directamente en la pantalla. A diferencia de los sistemas en retained mode, no hay pasos intermedios antes de dibujarse la pantalla. Como resultado, el modo inmediato de Canvas permite desarrollar juegos que se ejecutan rápido y que consumen menos memoria que otras tecnologías de gráficos. Otro beneficio de Canvas es la manera en que usa píxeles para crear y leerimágenes en la pantalla.
Es fácil realizar animaciones complejas cambiando cada píxel de manera individual. Canvas también puede detectar los píxeles que se dibujaron antes en la pantalla. Al usar esta función, un programa de juegos puede determinar si los objetos colisionan. La detección de colisiones es un requisito necesario para crear juegos de acción rápida.

¿Cuál es el soporte de losnavegadores actuales para el uso de Canvas?
Canvas funciona en la mayoría de los navegadores modernos. El soporte básico de Canvas está disponible en: Internet Explorer 9 (o superior), Firefox 3.6 (o superior), Chrome 4.0 (o superior), Safari 3.1 (o superior), Opera 9 (o superior).
La mayoría de los navegadores mejoran el soporte de Canvas a través de sus versiones.
En el 2009 se lanza el soporte paraCanvas en Google Chrome. En 2012 se hace una mejora de esta API.
El completo soporte que IE9 ofrece a canvas incluye los siguientes elementos de dibujado: rectángulos, líneas, llenados, arcos, sombras, curvas Bézier, curvas cuadráticas, imágenes y vídeo. Estos elementos se pueden crear mediante la completa implementación de la API 2D Context que Internet Explorer 9 incluye. En IE 9 laaceleración de Canvas está dada por hardware directamente, lo cual lo hace muy rápido.




Cómo es la semántica para utilizar esta etiqueta?
La etiqueta Canvas es usada en html 5 para la creació de gráficos 2d y 3d, el uso es por medio de javascript y su construccion es de esta forma:


Ejemplo usando jsfiddle.net.
Este es un ejemplo de cómo utilizar Canvas.



HTML5 Canvas example...