web-dev-qa-db-ja.com

HTMLキャンバスJavaScriptライブラリとフレームワークの現在の最新技術は何ですか?

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

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

また、商用製品とオープンソース製品の両方を検討したいと考えています。

107
Toby Hede

Fabric.js screenshot

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

this design editor で実際に動作することも確認できます。これは元々作成されたものです。

編集:プロジェクトは 現在githubで利用可能 (MIT Licenseの下でオープンソース化)

開始するには、チェックアウト:

Fabricは他のJavascriptキャンバスライブラリと比較してどうですか? 比較表 です。

96
kangax

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

WebGLは、OpenGL ES 2.0に基づく低レベルの3DグラフィックスAPI向けの、クロスプラットフォームでロイヤリティフリーのWeb標準であり、HTML5 Canvas要素を介してDocument Object Modelインターフェイスとして公開されます。 ...

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

WebGLは、GPUアクセラレーショングラフィックスのサポートにおいて非常に堅実です。これらのGLSL shaderdemos を確認してください。 :-)ユーザーインタラクションの例として ChemDoodle を参照してください。

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

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

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

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

更新:多くの抵抗を置いた後、MS はWebGLをサポートすることをIE = 11

17
LarsH

three.jsmr。doob により、javascript用の素晴らしい3Dエンジンです。シーングラフ(ソフトウェアとWebGL /ハードウェアアクセラレーションバージョンの両方)、シェーディング、パーティクル、スキンアニメーション(i think)、ライティングエフェクト。それをチェックしてください、彼は超才能のある仲間です。

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

15
alteveer

KineticJSは、キャンバス上に個々の「レイヤー」を作成してアニメーション化し、高いパフォーマンスを実現する、注目のライブラリです。

http://www.kineticjs.com/

13
ericbowden

CAKE.jsはもはやメンテナンスされていませんが、かなり強力なフレームワークです- http://code.google.com/p/cakejs/

デモ- http://glimr.rubyforge.org/cake/canvas.htmlhttp://glimr.rubyforge.org/cake/missile_fleet.html

8
Castrohenge

processingjs フレームワークをご覧ください。また、今後のmootoolsバージョン2.0には、キャンバスを操作するための art projekt があります

6

Raphael はかなり良いキャンバスライブラリのようです。 SVGベース(またはInternet ExplorerのVMLベース)であるため、多くのユーザー入力イベントをサポートします。かなり小さい(gzipで圧縮された60kb)ので、依存関係は大きすぎません。
Nice tweenerもあるようです: http://raphaeljs.com/reference.html#animateherehereを参照) 例)。

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

お役に立てれば!

6
Donald Harvey

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

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

Fabricのイベントハンドリンは、これらのどちらよりもはるかに悪いです-基本的に、キャンバス全体を1つの大きなイベントラッパーとして扱い、「Something」がクリックされたときに通知します。個々の図形または図形のグループにイベントを添付しません。

4
Dave Edelhart
3
unmounted

また、若いが、悪くないJavascriptフレームワーク、およびそれ(複雑なアニメーション、シーングラフの管理、イベントとユーザーインタラクションの処理)についてはすべて- jCanvaScript です。 「シーングラフの管理」を除きます。

3
Alex Savin

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

http://www.bhivecanvas.com

そして

http://labs.Adobe.com/technologies/Edge/

3
ZonerTone

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 /を入手したら)、ベクターグラフィックスから画像、プログラムで作成されたシャドウまで、すべての例が見つかります。

2
ace

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

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

2
CrociDB

ゲームエンジンとしての秋葉原に感銘を受けました。チュートリアルとAPIの形式で素晴らしいドキュメントがあります。私はいくつかの掲示板で秋葉原2リリースの話を見たことがあります。残念ながら、その話はすべて約1年以上前のものです。このエンジンがまだ開発中であることを本当に願っています。

1
Marc H

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

フィードバックとコメントを歓迎します。 http://www.quietless.com/kitchen/introducing-js3/

1
braitsch