¿Extrañas ActionScript 3?
¿El save y restore del canvas te marea?
Aquí esta tu solución
Estudiando el
tag canvas de HTML5 me dispuse a armar un framework que permita
programar de la misma forma que en ActionScript 3. Application:
Equivale al
Stage de AS3. Extiende de View.
En su función constructora recibe:
FPS - Velocidad del proyecto
idCanvas - El id del tag canvas
bgColor - Color de fondo
isDebugMode - Para mostrar los FPS en pantalla
View:
Equivale a los
sprites de AS3. Controla el renderizado a partir de una lista de "childs" utilizando los métodos addChild y removeChild. También detecta si alguna de sus "childs" colisiona con cierto punto (usado para el control del click).
Sus principales propiedades:
x
y
alpha
rotation
scaleX
scaleY
visible
parent
childs
ViewImage:
Equivale al
Bitmap de AS3. Si quieres aplicarle escala, rotación o transparencia tienes que agregarlo dentro de un View, y modificar ese View. Permite recortar la imagen en una posición determinada (función cut).
En el método constructor se agrega la URL de la imágen, y cuando esta es cargada ejecuta la función onLoadComplete que puede ser reemplazada.
Con
la función localToGlobal se obtiene el area de esta imágen modificada por todos los Views padres.
Sus principales propiedades son:
url
x
y
width
height
visible
maskX
maskY
maskWidth
maskHeight
parent
ViewSprite
Sirve para
generar animaciones a partir de una imágen.
[img=http://www.videoscrack.com/html5/data/character/0.png]
En su función constructora se indica:
URL - Dirección de la imágen
cols - Cantidad de columnas
rows - Cantidad de filas
duration - Duración de la animación
isLoop - Si la animación se va a repetir
ViewText
Equivale al
TextField de AS3 (aunque es mucho más simple). En su función constructora se indica:
text - Texto a mostrar
font - Fuente a utilizar
size - Tamaño de la fuente
fillColor - Color del texto
align - Tipo de alineamiento
Además cuenta con la función setStroke, para indicarle un borde al texto. localToGlobal también esta presente en esta clase.
Events
Esta es una simple clase para poder controlar los eventos de click a las Views. Lo único que le falta es controlar la propagación, o ver la forma de utilizar el addEventListener de javascript.
Ejemplo:
Este ejemplo es muy simple, lo hice en una hora a partir de otro proyecto que tenía como para mostrar algún resultado. Pero
las capacidades del framework es mucho más grande que las de este ejemplo. www.videoscrack.com/html5/index.html
Dibuje todo yo ^^
Descargar Framework y el Ejemplo
Al framework le faltan varias cosas todavía. Tiene un bug del click si se mueve el scroll de la web, y tampoco detecta bien el click de una View con rotación. Todavía no le agregué filtros. Habría que aumentar el performance. No tiene asignación de tamaño por width y height. No tiene una clase para controlar video. Y muchas cosas más...
Así que el que quiere ayudarme a mejorarlo será más que bienvenido ;)