Aktueller Stand der Javascript Canvas-Bibliotheken? [geschlossen]

Ich habe über HTML-Canvas-Bibliotheken recherchiert und bin auf diese Frage gestoßen. Wie ist der aktuelle Stand der Technik in HTML-Canvas-JavaScript-Bibliotheken und -Frameworks? Das wurde 2010 gefragt. Die beste Antwort war Fabric.js. Nachdem ich ein bisschen mehr recherchiert hatte, stieß ich auf http://www.html5canvastutorials.com/, das Tutorials zu KineticJs enthält, die sich durch mehrere Leinwände aus Gründen der Geschwindigkeit auszeichnen. Ein bisschen mehr Forschung später ergab, dass Canvas-Bibliotheken in Bezug auf Geschwindigkeit und Funktionen allgegenwärtig zu sein scheinen. Wie ist der aktuelle Stand der JavaScript Canvas-Bibliotheken und Frameworks heute? Hat man sich durchgesetzt?

EDIT: Da sich Bibliotheken ständig ändern und in letzter Zeit viele Leute hierher gekommen sind, um Neuigkeiten und Informationen über neue Bibliotheken zu erhalten, habe ich die Frage geändert, um zeitloser zu sein.

Haftungsausschluss: Ich bin der Autor von Fabric.js .

Ich würde sagen, dass Easel.js, Fabric.js und Paper.js derzeit zu den am häufigsten verwendeten gehören. Ich beurteile die Anzahl der Github-Beobachter für jedes Repository, das Diskussionsvolumen in ihren Google-Gruppen und wie oft ich höre, dass sie als Canvas-Bibliotheken auf Twitter verwendet werden.

Dies sind auch diejenigen mit mehr oder weniger anständiger Dokumentation, Beispielen / Demos, Diskussionsgruppen und Komponententests (der Teststatus in den meisten anderen Canvas-Bibliotheken ist ziemlich traurig).

Ich verwalte auch diese Vergleichstabelle verschiedener Canvas-Bibliotheken , in der Sie sehen können, wie kürzlich die Bibliothek aktualisiert wurde, wie groß sie ist, IE <9 oder node.js unterstützt und vieles mehr.

EDIT: KineticJS wird nicht mehr aktiv gewartet.

Haftungsausschluss: Ich habe KineticJS erstellt

KineticJS geht es eigentlich ziemlich gut. Sie finden den Quellcode bei Github , wo er derzeit von 2180 Personen gespielt wird.

Es kann Tausende von gleichzeitigen Formen verarbeiten:

10.000 Drag & Drop-Stresstest: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 Formen mit QuickInfos: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Es bietet eine sehr gute Ereignisunterstützung, einschließlich mobiler Ereignisse, und eine ziemlich solide Suite von Hunderten von Komponententests, sodass sich die Codebasis ziemlich solide anfühlt.

kangax: PS tolle Arbeit mit Fabric.js! Abgesehen von KineticJS (natürlich) sind meine beiden anderen Lieblingsbibliotheken Stoff und Papier.

Für die jüngsten Leser habe ich ab Januar 2013 Folgendes bewertet:

• Kinetisch
• Stoff
• Papier
• Staffelei

Mit "ausgewertet" habe ich mehr als nur die Dokumente gelesen. Ich habe eine Prototyp-App erstellt.

Ich habe mit Fabric angefangen, weil es die größte Community zu haben schien und dachte, dass es meine Lösung sein würde. Aber ich habe Fabric aus folgenden Gründen aufgegeben:

• seltsame und undokumentierte API-Inkonsistenzen, die einen Großteil meiner Zeit unnötig verbrannten.
• Unterstützung für inkonsistente Zeigerereignisse. Insbesondere betrachtet Fabric einen "Pfad" nicht als ein echtes Formobjekt, das auswählbar und beobachtbar ist. Dies entsprach nicht meinen Anforderungen, da interaktive Pfade eine wichtige Anforderung meiner App sind.
• Hinter den Kulissen werden Übersetzungen zum Canvas hinzugefügt, um Objekte zu positionieren. Für mich versucht Fabric in dieser Hinsicht zu klug zu sein, ohne dem Entwickler klar zu machen, was er tut.
• zu starke Meinung darüber, wie das Verschieben, Ändern der Größe und Drehen der Interaktivität funktioniert. In vielerlei Hinsicht ist es großartig, diese Funktionalität in das Framework integriert zu haben, aber in meinem Fall war ich mit der Art und Weise, wie sie implementiert wurde, nicht einverstanden, was bedeutete, dass ich sie ohnehin selbst neu implementieren musste.
• spärliche Dokumentation - viele Fälle, in denen die Dokumentation einer Methode die Form hat: "setX (Y) - setze das X auf Y" :-)

Ich habe mir Paper angesehen und bin nicht zu weit gekommen. Es schien mir zu stumpf und liegt auch zwischen zu Hockern IMO - es ist zu viel Visualisierungsbibliothek, um ein einfaches Objektmodell für Canvas zu sein, aber es reicht nicht aus, um mit D3 zu konkurrieren. Außerdem war die Dokumentation wieder nicht besonders zugänglich.

Ich denke, Staffelei macht wahrscheinlich sehr viel Sinn, wenn Sie einen Flash / ActionScript-Hintergrund haben, aber ich nicht. Außerdem schien es für meine Anforderungen zu spielorientiert zu sein. Der Nagel im Sarg war wieder Dokumentation - nicht genug und in nicht standardisiertem Format präsentiert.

Also habe ich mich für Kinetic entschieden, weil:

• wirklich reichhaltige und klare Tutorials und Beispiele
• API-Funktionen machen das, was sie genannt werden und sind weitgehend zu erraten - schnellere Produktivität, flachere Lernkurve
• ist ziemlich klar darüber, was es tut und was nicht - es ist nicht so reich wie einige der anderen, aber das ist ein Vorteil; es macht weniger Dinge, aber es macht sie besser
• Wege sind erstklassige Bürgerformen, wie jede andere Form, die für meine Anforderungen wesentlich war.

Kinetic ist keineswegs perfekt und es gab einige Male, in denen ich tief in den Quellcode eintauchen musste, um herauszufinden, was tatsächlich unter der Decke vor sich geht. Außerdem vermisse ich das SVG-Parsen und die Ausgabe von Fabric.

Ich kann pixijs nur empfehlen. Es ist eine Hochleistungs-Canvas-Bibliothek.

Pixi.js ist ein 2D-WebGL-Renderer mit einem nahtlosen Canvas-Fallback, der es ermöglicht, mit allen modernen Browsern sowohl auf dem Desktop als auch auf dem Handy zu arbeiten.

http://www.goodboydigital.com/pixi-js-is-out/