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

Mercury – Der HTML5 WYSIWYG-Editor WYSIWYG-Editoren sind aus der heutigen Online-Welt nicht mehr wegzudenken. Groß und mächtig und vollkommen unhandbar sind sie geworden. Unflexibel, in...
JavaScript Markdown Editor Markdown ist nichts nerdiges (mehr) sondern durchaus eine sinnvolle Sache, auf der viele Dienste inzwischen setzen (so zum Beispiel auch GitHub). Waru...
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...

Schreibe einen Kommentar