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

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...
Font Dragr – Fonts für den Einsatz im Web einfach ... Der Font Dragr ist eine ziemlich coole Sache, man kann einen beliebigen Font einfach auf eine dafür vorgesehene Fläche mittels Drag&Drop ziehen, u...
HTML5 Boilerplate in der Version 2 Ich habe ja bereits von der HTML5 Boilerplate berichtet, und ihrer Unverfrorenheit anstatt eines reset.css nun normalize.css einzusetzen. Das Projekt ...
WebSockets mit PHP WebSockets ist eine jener Techniken, die die Web-Welt nachhaltig revolutionieren könnten, da so Client-Server-Anwendungen recht einfach und vor allem ...

Schreibe einen Kommentar

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