201020Dez

Easel JS: JavaScript-Library für das Canvas-Element

Durch HTML5 und moderne Browser lassen sich mit dem Canvas-Element grafische Effekte erzeugen, die zudem animiert werden können. Wie so etwas aussehen könnte, lässt sich beispielsweise auf Bomomo bestaunen — die Anwendung zählt zu den frühen Canvas-Experimenten, die bis heute sehr beeindruckend sind. Eine gute Dokumentation sowie ein Canvas-Cheatsheet finden sich im MDC Doc Center.
Trotz guter Ressourcen kann es in manchen Fällen schwierig sein, mit dem Canvas-Element zu arbeiten, da es keine direkten Darstellungselemente oder Hilfsklassen gibt. Abhilfe schafft hier die JavaScript-Bibliothek Easel JS, welche die Canvas-Programmierung mit etlichen Features erleichtert.

Easel JS - A Javascript Library for Working with the HTML5 Canvas Element

Zu den primären Klassen von Easel JS zählen "DisplayObject", "Stage", "Container", "Bitmap", "BitmapSequence" und "Shape". Das Framework wurde von Flash und ActionScript inspiriert, so dass sich hier ähnliche Funktionalitäten wiederfinden. Einer BitmapSequence kann so etwa ein "SpriteSheet"-Objekt zugeordnet werden, welches die Einzelbilder (die in einer PNG-Grafik enthalten sind) einer Bewegung definiert — per "BitmapSequence.gotoAndPlay('frameName');" kann zum benannten Bild gesprungen werden und mit "stage.addChild(BitmapSequence);" wird die Sequenz zur Bühne hinzugefügt. Weitere Informationen finden sich in der API-Dokumentation oder in den Beispielen.