HTML5 Canvas in einfach – KineticJS

Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrieben werden muss! ;) Genau dies ist der Grund, wieso es derzeit mehr HTML5-Games-Engines gibt, als HTML5-Spiele. Es wäre fast schon Wahnsinn eine komplexe Canvas-Anwendung von Grund auf in Vanilla-Javascript aufzubauen.

Screenshot einer SVG-Landkarte in einem Canvas

Also liegt die Intention nahe, eine Library für Canvas zu nehmen, aber welche? jQuery zum Beispiel bearbeitet ja nur das DOM, aber zum Thema Canvas sagt es keinen Ton. Man kann also nicht auf altbekannte Werkzeuge zurückgreifen sondern sieht sich dazu genötigt sich für ein System zu entscheiden. Hierbei stellt sich dann als nächstes die Frage: selbst wenn das System gut ist, ist es zukunftssicher? Die Situation erinnert ein wenig an die Einführung der JavaScript-Libraries. Es existieren neben jQuery natürlich noch weitere (durchaus gleichwertige oder bessere) Libraries, aber inzwischen kann man wohl durchaus sagen, das jQuery sich als Quasi-Standard durchgesetzt hat. Blöd also wenn man nicht auf jQuery gesetzt hat (wie zum Beispiel Magento, die in der Version 2 auf jQuery wechseln).

Die HTML5 Canvas Library KinectJS ist die kompletteste Library die ich bisher gesehen habe. Sie deckte nicht nur einen bestimmten Bereich der Canvas-Nutzung ab, sondern ist ziemlich breit aufgestellt und lässt von einem Spiel bis hin zu komplexen Landkarten-Anwendungen alles zu. Die Library besitzt ein eigenes Tutorial-Portal was die Sache um so interessanter macht. „Learning bei Doing“ ist für mich die besten Methodik und es gibt auf dem Portal so viele Demos mit Quelltext das man sich schnell und gut zurecht findet, und vor allem für sein gerade anstehendes Problem mit Sicherheit auch ein ähnliches Tutorial findet.

Zusammenfassend kann man wohl sagen das KineticJS derzeit die Library ist, die am breitesten aufgestellt ist, und über die meistens Demos verfügt. Letztere sind schnell, der dazugehörige Quelltext sauber und intuitiv zu durchschauen und vor allem Klassen-orientiert. Solltet ihr in nächster Zeit etwas in Sachen Canvas programmieren wollen schaut euch die Library ruhig einmal an, sie vereinfacht das Leben ganz immens!

Ähnliche Beiträge

Datenvisualisierung in HTML5 mit HumbleFinance Fast jedes Trackingtool bzw. eCommerce-Paket visualisiert heutzutage Daten als Graphen. Dabei werden entweder Verkaufszahlen oder Besucherzahlen in ne...
WYSIHTML5 – der schnellere WYSIWYG Editor Was zur Zeit an WYSIWYG-Editoren für das Web unterwegs ist, ist der totale Overkill. Meistens wird ja TinyMCE oder der FCKEditor genommen, die beide n...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...
Preloader-Grafik als Canvas-Element online erstell... Jeder kennt sie, keiner stellt sie her: die netten rotierenden Kreise die von jeder Lightbox verwendet, oder auch bei Ajax-Aufrufen kurzzeitig eingebl...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.