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

Mozilla veröffentlicht ein HTML5-basiertes Browser... Der Markt der Browserspiele boomt. Mittlerweile erwirtschaften die Marktführer in diesem Bereich Jahres-Umsätze im dreistelligen Millionen-Bereich. ...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Isotope – Next Generation Website Layout dank jQue... Das letzte Plugin für jQuery was mich nachhaltig beeindruckt hatte, war Masonry. Das kleine Tool macht gerade auf Community-Seiten oder in Drupal rech...
Ideale Formulare in HTML5 Zusammen mit HTML5 wurden Formulare in ihren Möglichkeiten immens aufgewertet, was prinzipiell super ist, wenn man es benutzen könnte. Es ergibt sich ...

Schreibe einen Kommentar

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