Wie ist der aktuelle Stand der Technik in HTML-Canvas-JavaScript-Bibliotheken und -Frameworks? [geschlossen]

Ich untersuche derzeit Optionen für die Arbeit mit dem Canvas in einer neuen HTML 5-Anwendung und habe mich gefragt, wie der aktuelle Stand der Technik in HTML-Canvas-JavaScript-Bibliotheken und -Frameworks ist.

Gibt es insbesondere Frameworks, die die für die Spieleentwicklung erforderlichen Dinge unterstützen - komplexe Animationen, Verwalten von Szenendiagrammen, Behandeln von Ereignissen und Benutzerinteraktionen?

Auch bereit, sowohl kommerzielle als auch Open Source-Produkte in Betracht zu ziehen.

Ich habe an Fabric.js gearbeitet - einer Canvas-Bibliothek, die genau dabei hilft - Objekte auf Canvas zu manipulieren, indem Ereignisse und Benutzerinteraktionen behandelt werden. Es ist noch nicht veröffentlicht, aber sehen Sie sich eine einfache Vorschau-Demo an .

Sie können es auch in diesem Design-Editor in Aktion sehen , für den es ursprünglich erstellt wurde.

Bearbeiten: Das Projekt ist jetzt auf Github verfügbar (Open-Source unter MIT-Lizenz)

Überprüfen Sie zunächst Folgendes:

• Demos (einfach und komplex, mit Code, der zeigt, wie sie gemacht werden)
• Fabric.js Präsentation bei FalsyValues (und eine weitere bei BK.js )
• Wiki auf Github (einschließlich FAQ )
• Dokumentation
• Google Group (dort Fragen stellen)
• Fabric.js auf Twitter (oder kurze Fragen über Twitter)
• Einführung in Fabric.js: Teil 1 (Artikel über ScriptJunkie)
• Einführung in Fabric.js: Teil 2 (Artikel über ScriptJunkie)

Wie vergleicht sich Fabric mit anderen Javascript-Canvas-Bibliotheken? Hier ist eine Vergleichstabelle .

Ich bin überrascht, dass niemand WebGL und darauf aufbauende Frameworks erwähnt hat . Ich würde es als ganz oben auf der Liste für den Stand der Technik für 3D-GPU-beschleunigte Grafiken und komplexe Animationen auf HTML-Canvas / Javascript betrachten.

WebGL ist ein plattformübergreifender, lizenzgebührenfreier Webstandard für eine einfache 3D-Grafik-API auf Basis von OpenGL ES 2.0, die über das HTML5-Canvas-Element als Schnittstellen für das Dokumentobjektmodell verfügbar gemacht wird. ...

WebGL bringt Plugin-freies 3D ins Web, das direkt im Browser implementiert ist. Die wichtigsten Browser-Anbieter Apple (Safari), Google (Chrome), Mozilla (Firefox) und Opera (Opera) sind Mitglieder der WebGL-Arbeitsgruppe.

WebGL unterstützt GPU-beschleunigte Grafiken sehr solide. Schauen Sie sich diese GLSL- Shader- Demos an . :-) Und sehen Sie ChemDoodle als Beispiel für Benutzerinteraktion.

Ich habe an einer App mit dem O3D- Framework von Google gearbeitet, das das Szenendiagramm verwaltet und WebGL zum Rendern verwendet (es verwendete früher ein eigenes Plug-In). O3D ist in Arbeit und seine Dokumentation ist nicht vollständig auf dem neuesten Stand, befindet sich jedoch in der aktiven Entwicklung und es gibt einige gute Demos . 3D-Pool kann am meisten in Ihrer Gasse sein. Die Google-Entwickler reagieren sehr schnell auf Fragen in der Diskussionsgruppe.

Es gibt eine Reihe anderer Frameworks, die auf WebGL basieren. siehe hier . Zu denjenigen, die Spieleentwicklung und Szenendiagramme erwähnen, gehören Copperlicht, SceneJS und X3DOM.

WebGL wird in den letzten Entwicklungsversionen mehrerer Browser ausgeführt , jedoch nicht im Internet Explorer. Ich habe Firefox ("Minefield") und Chromium mit guten Ergebnissen verwendet. Sie benötigen eine davon, um die oben genannten Demos auszuführen.

Wenn Sie jedoch festlegen, dass keine Abhängigkeiten über HTML 5 canvas / js hinaus bestehen dürfen, ist WebGL möglicherweise nicht die richtige Wahl. Es sieht nicht so aus, als würde IE es bald unterstützen.

Update: Nachdem MS viel Widerstand geleistet hatte, entschied sie sich, WebGL in IE 11 zu unterstützen .

three.js , von mr. doob ist eine fantastische 3D-Engine für Javascript, die Szenegraph (sowohl Software- als auch WebGL / Hardware-beschleunigte Versionen), Schattierungen, Partikel, enthäutete Animationen (glaube ich) und Lichteffekte enthält. Probieren Sie es aus, er ist ein super talentierter Kerl.

Ich sollte hinzufügen, dass Sie das neueste Google Chrome oder ein gleichwertiges Produkt benötigen, um die meisten Demos anzuzeigen. Einer meiner Favoriten ist: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS ist eine aufstrebende Bibliothek, in der einzelne "Ebenen" auf der Leinwand erstellt und animiert werden, um eine hohe Leistung zu erzielen.

http://www.kineticjs.com/

CAKE.js wird nicht mehr gepflegt, ist aber ein ziemlich leistungsfähiges Framework - http://code.google.com/p/cakejs/

Demos hier - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Schauen Sie sich das Verarbeitungs- Framework an. Auch die kommende mootools Version 2.0 hat das Kunstprojekt , mit Leinwand zu arbeiten

Raphael scheint eine ziemlich gute Leinwandbibliothek zu sein; Es ist SVG-basiert (oder VML-basiert in Internet Explorer) und unterstützt daher viele Benutzereingabeereignisse. Es ist ziemlich klein (60kb gzipped), also keine zu große Abhängigkeit.
Es scheint auch einen netten Tweener zu haben: http://raphaeljs.com/reference.html#animate (Beispiele finden Sie hier und hier ).

Ein Beispiel dafür, was es kann, finden Sie in dieser cleveren kleinen Demo .

Hoffe das hilft!

Ich habe festgestellt, dass zwei Bibliotheken äußerst wettbewerbsfähig und viel besser als Fabric sind.

Kinetic.js und easel.js verfügen beide über eine äußerst gute Ereignisbehandlung, Gruppierung und allgemeine Formabstraktion. In beiden finden Sie viel zu lieben; Staffelei scheint mehr Bildorientierung und Filterung zu haben.

Die Event-Handlins von Fabric sind VIEL schlechter als beide - im Grunde genommen behandelt es die gesamte Leinwand als einen großen Event-Rrapper und sagt Ihnen, wenn auf "Etwas" geklickt wurde. Es werden keine Ereignisse an einzelne Formen oder Gruppen von Formen angehängt.

Es gibt eine interessante Bibliothek , die darauf abzielt, einige der Grundlagen der Arbeit mit der Canvas-API canto.js von David Flanagan, Autor von Javascript: The Definitive Guide , zu verbessern .

Auch junges, aber nicht schlechtes Javascript-Framework und alles (komplexe Animation, Verwalten von Szenendiagrammen, Behandeln von Ereignissen und Benutzerinteraktionen) - jCanvaScript . Kann sein, außer "Verwalten von Szenendiagrammen".

Die Zusammenarbeit mit bHive zur Erstellung von Diagrammen und zum Verschieben von Site-Headern scheint beeindruckend und leistungsstark zu sein, im Gegensatz zu den anderen, die derzeit entwickelt werden. Adobe Edge ist auch einen Blick wert, wenn auch nicht Canvas.

http://www.bhivecanvas.com

und

http://labs.adobe.com/technologies/edge/

Aves Engine ist wirklich großartig: http://www.dextrose.com/de/projects/aves-engine

Auch Akihabara scheint gut zu sein: http://www.kesiev.com/akihabara/

Wenn Sie Javascript verwenden möchten, ist Dojo ein guter Weg. Es verfügt über eine kompakte, plattformübergreifende (SVG, VML, Canvas, Silverlight) Vektorgrafik-API, die sehr leistungsfähig ist. Sie finden es in dojo.gfx und dojox.gfx.

Wir haben dies verwendet, um einen interaktiven Physik-Tutor zu erstellen, mit dem die Schüler Vektoren, Ellipsen usw. zeichnen (sogar Bilder anhängen) und alle möglichen Transformationen an ihnen durchführen können. Sie können sehen, was wir unter http://gideon.eas.asu.edu/web-UI/login.html getan haben. Melden Sie sich einfach mit einem beliebigen Benutzernamen an.

Ich habe mir Fabric.js angesehen und dojox.drawing macht viele der gleichen Dinge. Wenn Sie sich die Tests im Toolkit ansehen (sobald Sie es in Dojox / Zeichnung / Tests / haben), finden Sie Beispiele für alles, von Vektorgrafiken über Bilder bis hin zu programmgesteuert erstellten Schatten.

Ich bin beeindruckt von Akihabara als Spiel-Engine. Es hat eine fantastische Dokumentation in Form von Tutorials und einer API. Ich habe sogar in einigen Message Boards gesehen, dass von einer Akihabara 2-Veröffentlichung die Rede ist. Leider ist das ganze Gerede über ein Jahr oder älter. Ich hoffe wirklich, dass dieser Motor noch entwickelt wird.

Ich habe gerade die erste Iteration einer neuen Zeichnungs- und Tweening-Bibliothek veröffentlicht, die sich an Leute mit AS3 / Flash-Entwicklungshintergrund richtet. Obwohl meine Bibliothek noch keine komplexen Zeichenpfade oder Grafiken unterstützt, hoffe ich, dass sie den Leuten hilft, grundlegende Grundelemente auf vertraute Weise schnell zu zeichnen und zu animieren.

Feedback und Kommentare sind willkommen. http://www.quietless.com/kitchen/introducing-js3/