Javascript Canvasライブラリの現在の状態？
私はHTMLキャンバスライブラリの研究を行ってきましたが、この疑問に出会いました。 HTMLキャンバスのJavaScriptライブラリとフレームワークの最新技術は何ですか？ 2010年に尋ねられました。一番の答えはFabric.jsでした。もう少し研究をした後、私は http://www.html5canvastutorials.com/ に出会いました。これは、KineticJsのチュートリアルを特徴としており、高速化のために複数のキャンバスを持っています。後でさらに調査を行った結果、Canvasライブラリは、速度と機能の点であらゆるところにあるようだと判明しました。今日のJavaScript Canvasライブラリとフレームワークの現状はどうですか？一番上に出てきましたか？
編集：図書館は常に変化しており、新しい図書館に関するニュースや情報を求めて多くの人がここに来ているので、質問をより時代を超越するように変更しました。
免責事項：私は Fabric.js の著者です。
Easel.js、Fabric.js、およびPaper.jsは、現時点で最も使用されているものの1つだと思います。私は、各リポジトリのGithubウォッチャーの数、Googleグループでの議論の量、およびTwitterでキャンバスライブラリとして使用される頻度について聞いています。
また、これらは多かれ少なかれ適切なドキュメント、例/デモ、ディスカッショングループ、単体テストを備えたものです（他のほとんどのキャンバスライブラリでのテストの状態はかなり悲しいです）。
また、これを維持しています さまざまなキャンバスライブラリの比較表 。ここでは、ライブラリの更新日時、サイズ、IE <9またはnode.jsのサポートなどを確認できます。
編集：KineticJSはもはやアクティブにメンテナンスされていません。
免責事項：KineticJSを作成しました
KineticJSは実際に非常にうまく機能しています。ソースコードは Github で見つけることができます。現在、2180人が主演しています。
数千の同時図形を処理できます。
10,000のドラッグアンドドロップストレステスト： http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
ツールチップ付きの10,000個の図形： http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/
モバイルイベントを含む非常に優れたイベントサポートを備えており、数百の単体テストの非常に堅実なスイートを備えているため、コードベースは非常に堅実に感じられます。
kangax：P.S. fabric.jsで素晴らしい仕事を！ （もちろん）KineticJS以外に、私のお気に入りの2つのライブラリはファブリックと紙です。
2013年1月現在、最近の読者のために、以下を評価しました。
- キネティック
- ファブリック
- 紙
- イーゼル
「評価」することで、私は単にドキュメントを読む以上のことをしました。プロトタイプアプリを作成しました。
Fabricが最大のコミュニティを持っているように見え、それが私のソリューションだと思ったので、Fabricから始めました。しかし、次の理由でFabricを放棄しました。
- 奇妙で文書化されていないAPIの不整合により、不必要に多くの時間が費やされました。
- 一貫性のないポインターイベントのサポート。具体的には、Fabricは「パス」を選択可能で観察可能な真の形状オブジェクトとは見なしません。インタラクティブパスは私のアプリの主要な要件であるため、これは私のニーズを満たしていませんでした。
- 舞台裏でキャンバスに翻訳を追加してオブジェクトを配置します。私にとって、Fabricは、開発者にそれが何をしているのかを明確にすることなく、この点であまりにも賢くしようとします。
- インタラクティブ機能の移動、サイズ変更、回転の方法に関する過度に強い意見。多くの点で、この機能をフレームワークに組み込むことは素晴らしいことですが、私の場合、基本的に自分で再実装する必要があるという実装方法に同意しませんでした。
- スパースドキュメント-メソッドのドキュメントが次の形式である場合が多くあります： "setX（Y）-set to the X to Y" :-)
Paperを見て、あまり遠くに行かなかった。それは私には過度に鈍感で、あまりにもスツールIMOの間に収まります-Canvasの単純なオブジェクトモデルには視覚化ライブラリが多すぎますが、D3と競合するには視覚化ライブラリが十分ではありません。さらに、ドキュメントには特にアクセスできませんでした。
Flash/ActionScriptのバックグラウンドをお持ちの場合、イーゼルはおそらく理にかなっていると思いますが、私はそうではありません。それに加えて、私の要求に合わせて過度にゲームに焦点を当てているように見えました。 coの中の爪は再び文書化された-十分ではなく、非標準形式で提示された。
だから、私はキネティックに行きました：
- 本当に豊富で明確なチュートリアルと例
- API関数は、それらが呼ばれていることを実行し、ほとんど推測可能です-生産性の向上、学習曲線の浅化
- それが何をするのか、何をしないのかについて合理的に明確です-それは他のいくつかのほど豊かではありませんが、それは利益です;それはより少ないことをしますが、より良くします
- パスは、他のシェイプと同様に、ファーストクラスの市民シェイプです。これは私の要件に不可欠でした。
Kineticは決して完璧ではありません。実際に何が起こっているのかを理解するために、ソースコードを深く掘り下げなければならなかったことが何度かありました。さらに、FabricのSVG解析と出力を見逃しています。
Pixijsを強くお勧めします。その高性能キャンバスライブラリ。
Pixi.jsは、シームレスなキャンバスフォールバックを備えた2D webGLレンダラーであり、デスクトップとモバイルの両方の最新のブラウザーすべてで動作することができます。