c't 4/2017
S. 168
Know-how
Canvas-Elemente mit EaselJS
Aufmacherbild

1000 Meisterwerke

Canvas-Grafiken mit CreateJS erzeugen

Die Arbeit mit dem Canvas-Element von HTML5 kann „zu Fuß“ recht anstrengend sein. Mit der JavaScript-Bibliothek CreateJS wird das Zeichnen und Animieren mit Hilfe von Canvas-Elementen zum Kinderspiel.

Das canvas-Element ist das flexibelste HTML-Objekt zur grafischen Darstellung. Diese Vielseitigkeit wird aber mit einer mühevollen Programmierung erkauft. Die Bibliothek CreateJS hilft dabei, auch komplexe Projekte mit dem canvas-Element schnell umzusetzen. CreateJS besteht eigentlich aus mehreren Einzelkomponenten. Die wichtigsten davon sind EaselJS, das sich um das Zeichnen von Grafiken kümmert, und TweenJS zum Animieren von Elementen.

Viel mehr als eine HTML-Datei mit einem canvas-Element und die JavaScript-Bibliothek CreateJS braucht man nicht, um loszulegen. Die Entwickler von CreateJS stellen die Bibliothek über ein CDN (Content Delivery Network) bereit. Der Vorteil der Einbindung per CDN ist, dass Nutzer, die bereits eine Seite besucht haben, die CreateJS verwendet, die Bibliothek im Browser-Cache haben.

Ein größeres Demo-Projekt, das die grundlegenden Funktionen von CreateJS nutzt, finden Sie über den c’t-Link am Ende des Artikels.