HTML canvas JavaScriptライブラリとフレームワークの現在の最新技術は何ですか？[閉まっている]

現在、新しいHTML 5アプリケーションでキャンバスを操作するためのオプションを調査していますが、HTMLキャンバスのJavaScriptライブラリとフレームワークの現在の状態はどうなっているのでしょうか。

特に、ゲーム開発に必要なもの（複雑なアニメーション、シーングラフの管理、イベントの処理、ユーザーインタラクション）をサポートするフレームワークはありますか？

また、商用製品とオープンソース製品の両方を検討する用意があります。

私は、イベントとユーザーの操作を処理することにより、canvas上のオブジェクトを操作するために、fabric.js（まさにそれを支援するキャンバスライブラリ）に取り組んできました。まだリリースされていませんが、簡単なプレビューデモをご覧ください。

もともと作成されたこのデザインエディタで、実際の動作を確認することもできます。

編集：プロジェクトはgithub（MITライセンスでオープンソース）で利用可能になりました

開始するには、以下をチェックしてください：

• デモ（シンプルで複雑、どのように行われたかを示すコード付き）
• FalsyValuesでのFabric.jsプレゼンテーション（およびBK.jsでの別のプレゼンテーション）
• github上のWiki（FAQを含む）
• ドキュメンテーション
• Googleグループ（そこで質問してください）
• TwitterでのFabric.js（またはTwitter経由の簡単な質問）
• Fabric.jsの概要：パート1（ScriptJunkieに関する記事）
• Fabric.jsの概要：パート2（ScriptJunkieに関する記事）

ファブリックは他のJavaScriptキャンバスライブラリと比較してどうですか？こちらが比較表です。

誰もWebGLとそれに基づいて構築されたフレームワークについて言及していないことに驚いています。私は、3D GPUアクセラレーショングラフィックスとHTMLキャンバス/ JavaScriptの複雑なアニメーションのための最先端のリストの上位にあると考えています。

WebGLは、OpenGL ES 2.0に基づく低レベル3DグラフィックAPI向けのクロスプラットフォームでロイヤリティフリーのウェブ標準であり、ドキュメントオブジェクトモデルインターフェースとしてHTML5 Canvas要素を通じて公開されます。...

WebGLはプラグインなしの3DをWebにもたらし、ブラウザーに直接実装されます。主要なブラウザベンダーであるApple（Safari）、Google（Chrome）、Mozilla（Firefox）、およびOpera（Opera）は、WebGLワーキンググループのメンバーです。

WebGLは、GPUアクセラレーショングラフィックスのサポートにおいて非常に強固です。これらのGLSL シェーダーの デモを確認してください。:-)そして、ユーザーインタラクションの例としてChemDoodleをご覧ください。

私は、シーングラフを管理し、レンダリングにWebGLを使用する（独自のプラグインを使用していた）GoogleのO3Dフレームワークを使用するアプリに取り組んでいます。O3Dは進行中の作業であり、そのドキュメントは完全に最新ではありませんが、活発に開発されており、いくつかの優れたデモがあります。3Dプールはあなたの路地を最も上にあるかもしれません。Googleの開発者は、ディスカッショングループの質問に非常に敏感です。

他にもWebGL上に構築されたフレームワークがいくつかあります。こちらをご覧ください。ゲーム開発とシーングラフについて言及しているのは、Copperlicht、SceneJS、X3DOMです。

WebGLは、いくつかのブラウザーの最近の開発ビルドで実行されますが、IEでは実行されません。私はFirefox（ "Minefield"）とChromiumを使用していて、良い結果が出ています。上記のデモを実行するには、これらのいずれかが必要です。

ただし、HTML 5 canvas / js以外の依存関係がないことが要件である場合、WebGLは適切な選択ではない可能性があります。それはそれをサポートしていますIEのようには見えませんいつでもすぐに。

更新：多くの抵抗を置いた後、MS はIE 11でWebGLをサポートすることを決定しました。

three.js、 mr。doobは、シーングラフ（ソフトウェアとWebGL /ハードウェアアクセラレーションバージョンの両方）、シェーディング、パーティクル、スキンアニメーション（私は思う）、およびライティングエフェクトを含むJavaScript用の素晴らしい3Dエンジンです。それをチェックしてください、彼は非常に才能のある仲間です。

ほとんどのデモを表示するには、最新のGoogle Chromeまたは同等のものが必要になることを付け加えておきます。私のお気に入りの1つは、http：//mrdoob.github.com/three.js/examples/webgl_materials_cars.htmlです。

KineticJSは、キャンバス上で個々の「レイヤー」を作成してアニメーション化し、高性能を実現する新進気鋭のライブラリです。

http://www.kineticjs.com/

CAKE.jsもはや維持されているではありませんが、かなり強力なフレームワークである- http://code.google.com/p/cakejs/

デモはこちら-http : //glimr.rubyforge.org/cake/canvas.html、http：//glimr.rubyforge.org/cake/missile_fleet.html

processingjsフレームワークを見てください。また、次のmootoolsバージョン2.0には、キャンバスで動作するアートプロジェクトが含まれています。

ラファエルはかなり良いキャンバスライブラリのようです。これはSVGベース（またはInternet ExplorerではVMLベース）であるため、多くのユーザー入力イベントをサポートしています。かなり小さい（60kb gzip圧縮）ので、依存関係が大きすぎません。
それも素晴らしいツイナーを持っているようです：http ://raphaeljs.com/reference.html#animate （例についてはこことここを参照してください）。

それができることの例については、この賢い小さなデモを見てください。

お役に立てれば！

2つのライブラリが非常に競争力があり、ファブリックよりもはるかに優れていることがわかりました。

Kinetic.jsとeasel.jsはどちらも、非常に優れたイベント処理、グループ化、および一般的な形状の抽象化を備えています。あなたはこれらの両方で愛する多くを見つけるでしょう。イーゼルは、より画像指向でフィルタリングされているようです。

ファブリックのイベントハンドリンはこれらのどちらよりもはるかに劣ります-基本的に、キャンバス全体を1つの大きなイベントラッパーとして扱い、「何か」がクリックされたときに通知します。個々のシェイプまたはシェイプのグループにイベントをアタッチしません。

JavaScript：The Definitive Guideの作者であるDavid Flanaganによるcanto.jsと呼ばれるキャンバスAPIの操作の基本の一部を改善することを目的とした興味深いライブラリがあります。

また、JavaScriptのフレームワークは若くは悪くありませんが、それ（複雑なアニメーション、シーングラフの管理、イベントとユーザーインタラクションの処理）はすべてjCanvaScriptです。「シーングラフの管理」を除いて可能性があります。

グラフを作成してサイトヘッダーを移動するためにbHiveと協力していることは、他のものとは異なり、印象的で強力なようです。厳密にはCanvasではありませんが、Adobe Edgeも一見の価値があります。

http://www.bhivecanvas.com

そして

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

Aves Engineは本当に素晴らしいです：http : //www.dextrose.com/en/projects/aves-engine

また、秋葉原は良いようです：http : //www.kesiev.com/akihabara/

JavaScriptを使用する場合は、Dojoが最適です。非常に強力なコンパクトなクロスプラットフォーム（SVG、VML、Canvas、Silverlight）のベクターグラフィックAPIを備えています。dojo.gfxとdojox.gfxにあります。

これを使用して、学生がベクトルや楕円など（画像を追加することもできる）を描画し、それらに対してあらゆる種類の変換を実行できるインタラクティブな物理学の先生を構築しました。http://gideon.eas.asu.edu/web-UI/login.htmlで私たちが行ったことを確認できます-任意のユーザー名でログインするだけです。

私はfabric.jsを調べましたが、dojox.drawingは多くの同じことを行います。ツールキットのテストを見ると（dojox / drawing / tests /になったら）、ベクターグラフィックスからイメージ、プログラムで作成されたシャドウまで、すべての例が見つかります。

ゲームエンジンとして秋葉原に感動しました。チュートリアルとAPIの形で素晴らしいドキュメントがあります。秋葉原2のリリースについてのいくつかのメッセージボードの話を見たことがあります。残念ながら、その話はすべて1年以上前のものです。このエンジンがまだ開発されていることを願っています。

AS3 / Flash開発のバックグラウンドを持つ人々を対象とした新しい描画とトゥイーンのライブラリの最初のイテレーションをリリースしました。私のlibはまだ複雑な描画パスやグラフをサポートしていませんが、基本的なプリミティブを慣れ親しんだ方法ですばやく描画およびアニメーション化できるようになることを願っています。

フィードバックやコメントは大歓迎です。 http://www.quietless.com/kitchen/introducing-js3/