[解決済み] HTML5 Canvas Vector Graphics? [クローズド］

質問

HTML5 Canvasでベクターグラフィックスを描画・処理するためのライブラリを教えてください。

ありがとうございます!!!

解決方法は？

いくつかの選択肢があります。私はどちらのライブラリも使ったことがありませんが、私が知る限りでは、Cakeの方が一般的に印象的で、インポートされているようですが、同時に3倍の大きさです。また、現在processing.jsの拡張であるBurst Engineもあり、こちらはさらに小さいです。他にもいくつかあると思います。

Processing.js

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

サイズ: 412 KB

ラファエル

Raphaël は小さな JavaScript ライブラリで、Web 上でのベクターグラフィックスの作業を簡略化することができるはずです。例えば、独自のグラフや画像の切り抜きや回転ウィジェットを作りたい場合、このライブラリでシンプルかつ簡単に実現することができます。 Raphaël は SVG W3C 勧告と VML をベースにグラフィックを作成します。つまり、作成したすべてのグラフィックオブジェクトはDOMオブジェクトでもあり、JavaScriptのイベントハンドラを添付したり、後から修正したりすることができるのだ。Raphaëlの目標は、クロスブラウザで互換性のあるベクターアートを簡単に描けるようにするアダプターを提供することです"

サイズ：60KB

Snap.svg

Raphaëlの後継機種。同じ開発者によって書かれましたが、モダンブラウザのみを対象としています。

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

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

サイズ：66KB

ケーキ

CAKEは、canvasタグのためのシーングラフライブラリです。XMLを除いたSVGのようなものだと言っても過言ではないでしょう。

サイズ:212 KB

Paper.js

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

サイズ：627.91 KB

バーストエンジン

バーストエンジンは、HTML5 Canvas 要素のためのオープンソースのベクターアニメーションエンジンです。Burst は Flash と同様のウェブ機能を提供し、After Effects のようなレイヤーベースのアニメーション システムを含んでいます。Burst は非常に軽量な JavaScript フレームを使っています。つまり、アニメーションは気付かないほど速くダウンロードされ、非常にシンプルな JavaScript コマンドを使って制御でき、チェーンやコールバックが可能になります。... Burst は現在、John Resig による優れたアニメーションポートである Processing.js の拡張版となっています。現在、独立した Burst エンジンの開発が進行中です。これは、jQuery や Processing.js を使わずに Burst を使いたいときに、ロード時間やメモリ使用量を減らすことができます。

注：Burstの将来のバージョンはNative Processingアプリケーションとしても動作し、BurstアニメーションをJavaアプレットまたはバイナリ実行ファイルとして実行できるようになる予定です。

また、最終更新は2010年のようです。

サイズ：52.6 KB

.contextを使ったキャンバスへの直接描画

これは外部ライブラリではなく、javascriptで直接キャンバスに描画するものです。