web-dev-qa-db-ja.com

HTML5 Canvas Vector Graphics?

HTML5 Canvas内のベクターグラフィックスの描画と処理のためのライブラリを知っていますか?

ありがとうございました!!!

43
Edward83

いくつかのオプションがあります。私はこれらのライブラリのいずれも使用していませんが、Cakeが伝えることができることから、Cakeは一般的にはより印象的で、インポートされているように見えますが、3倍も大きくなっています。また、現在はprocessing.jsの拡張機能であるバーストエンジンもありますが、これはさらに小さくなっています。他にもいくつかあるはずです。

Processing.js

「Processing.jsは、人気のあるProcessingビジュアルプログラミング言語の姉妹プロジェクトです...」

サイズ:412 KB

Raphael

「Raphaëlは、Web上のベクターグラフィックスを使用して作業を簡素化する小さなJavaScriptライブラリです。たとえば、独自の特定のチャートまたは画像の切り抜きと回転ウィジェットを作成する場合、このライブラリで簡単かつ簡単に実現できます。Raphaël SVG W3C勧告とVMLをグラフィックス作成のベースとして使用するため、作成するすべてのグラフィカルオブジェクトはDOMオブジェクトでもあるため、JavaScriptイベントハンドラーを添付したり、後で変更したりできます。ベクターアート互換のクロスブラウザで簡単。」

サイズ:60 KB

Snap.svg

ラファエルの後継者。同じ開発者が作成しましたが、最新のブラウザのみを対象としています。

「Snapは、既存のSVGコンテンツとSnapで生成されたSVGコンテンツの両方をアニメーション化および操作するための、クリーンで合理化された直感的で強力なAPIをWeb開発者に提供します。

シンプルで直感的なアニメーション用のJavaScript APIを提供することにより、SnapはSVGコンテンツをよりインタラクティブで魅力的なものにすることができます。」

サイズ:66 KB

Cake

「CAKEはcanvasタグ用のシーングラフライブラリです。SVGがXMLを無視しているように見えます。

サイズ:212 KB

Paper.js

「Paper.jsは、HTML5 Canvas上で実行されるオープンソースのベクターグラフィックススクリプトフレームワークです。」

サイズ:627.91 KB

バーストエンジン

「バーストエンジンは、HTML5 Canvas要素用のオープンソースベクトルアニメーションエンジンです。バーストはFlashと同様のWeb機能を提供し、After Effectsのようなレイヤーベースのアニメーションシステムを含みます。バーストは非常に軽量なJavaScriptフレームを使用し、迅速で、非常に簡単なJavaScriptコマンドを使用して制御でき、チェーンとコールバックを可能にします... Burstは現在、John ResigによるすばらしいアニメーションポートProcessing.jsの拡張機能です。独立したBurst Engineの開発が進行中です。 jQueryまたはProcessing.jsを使用せずにBurstを使用する場合、ロード時間とメモリ使用量を削減します。

注:バーストの将来のバージョンもネイティブ処理アプリケーションとして実行されるため、Javaアプレットまたはバイナリ実行可能ファイルとしてバーストアニメーションを実行できます。 "

また、2010年に最後に更新されたようです。

サイズ:52.6 KB

。context を使用してキャンバスに直接描画する

これは外部ライブラリではなく、javascriptを介してキャンバスに直接描画します。

45
expiredninja

http://paperjs.org/ は最近発表されました。すごい。

10
a paid nerd

http://raphaeljs.com/ はSVGでうまく機能します

3
saibotd

http://canvimation.github.com/ は、画面にグラフィックを描画し、キャンバスタグとコンテキストコマンドを使用して結果をWebページとしてエクスポートして、図面を再現できるオープンソースアプリケーションです。利用可能ないくつかのアニメーションがあります。開発中です。ヘルプページも利用できます。

1
jing3142