HTML5: Usando el canvas

El elemento canvas en HTML5 puede usarse para  realizar graficos con javascript. Lo creo Apple, despues lo implementaron Opera y Firefox y ahora es parte de HTML5. IE por supuesto que no lo implementa.

Para aprender a usarlo hice una animacion de particulas que se pueden comportar como arena o como “coral” a medida que van cayendo y chocando con las que cayeron antes.

Correr el ejemplo de particulas (abre en otra ventana)

Funciona en Firefox 3.6, Safari 4, Chrome 5. Esas fueron las versiones en las que lo probe, deberia funcionar en versiones anteriores como asi tambien en Opera. En IE no funciona.

Coral?

Empece con la idea de que las particulas fueran copos de nieve (si ven el codigo fuente quedan referencias como ‘snow‘, ‘snowfall‘, etc) pero cuando estaba implementando como se comportan los copos / particulas al caer, llegue a ver como se formaban estructuras que me parecieron “corales” y como coral y nieve no van bien juntos, transforme los copos en arena.

Codigo fuente

El codigo fuente esta en github en luisparravicini/ejemplo-canvas.

Al principio tuve problemas de performance y use FireBug para ver que era lo que consumia mas. El problema era el dibujado de cada particula, que se hacia con un clearRect / fillRect y eso consumia 60% del total. Despues de varias pruebas hice que se obtenga una copia de la pantalla al inicio con getImageData, cada particula se dibuja sobre ese buffer y al final se copia el buffer al canvas con putImageData. Asi el proceso de dibujado bajo a un 20%-30%.

Mas ejemplos (no mios)

Un port de Out of this world. Uno del Wolfenstein. Y en Canvas Demos hay bastantes  links a aplicaciones hechas con canvas.

http://en.wikipedia.org/wiki/Canvas_element

Categorías: Investigacion, Programacion

Leave a comment