Canvas を使用してプロジェクトを開始しました。しかし、私が必要とすることの 1 つは、次の例のように移動可能でクリック可能なボックスを追跡することです: http://raphaeljs.com/graffle.htmlなので、Raphael-js + SVG の方が良いかどうか疑問に思っています。
どちらを使用しますか? なぜ?
Canvas を使用してプロジェクトを開始しました。しかし、私が必要とすることの 1 つは、次の例のように移動可能でクリック可能なボックスを追跡することです: http://raphaeljs.com/graffle.htmlなので、Raphael-js + SVG の方が良いかどうか疑問に思っています。
どちらを使用しますか? なぜ?
この回答は、私の回答から別の質問にコピーされています。しかし、OPはその後質問を変更したため、この回答は関連性が低くなりました。私見は、この質問により関連しているので、ここに行きます:
canvas と svg の違いは、Photoshop と Illustrator (または OSS 関係者の場合は Gimp と Inkscape) の違いと考えてください。1 つはビットマップを扱い、もう 1 つはベクター アートを扱います。
キャンバスを使用すると、ビットマップで描画するため、画像を簡単に汚したり、ぼかしたり、焼いたり、覆い隠したりすることができます。しかし、これはビットマップであるため、簡単に線を描画してから線の位置を変更することはできません。古い線を削除してから、新しい線を引く必要があります。
svg を使用すると、ベクトルを描画しているため、描画を簡単に移動、拡大縮小、回転、再配置、反転できます。ただし、ベクトルなので、線の太さに応じてエッジをぼかすことや、赤い円を青い正方形にシームレスに融合させることは簡単ではありません。オブジェクト間に中間ポリゴンを描画して、ぼかしをシミュレートする必要があります。
ユースケースが重複することもあります。たとえば、多くの人がキャンバスを使用して単純な線画を作成し、JavaScript のデータ構造としてオブジェクトを追跡します。しかし、実際には、両者は異なる目的を果たします。キャンバスの上に純粋な JavaScript で汎用ベクトル描画を実装しようとすると、C で実装されている可能性が最も高い svg を使用するよりも高速になるとは思えません。
決定すべきいくつかのこと-あなたはあなたのものをモバイルブラウザで動作させたいですか?SVG(Raphael)はAndroidでは動作しません(iPhoneについてはわかりません)。逆に、古いバージョンのInternet Explorerで動作するものが必要な場合は、canvasが動作しない可能性があります(ExCanvasがIE6をサポートしているかどうかはわかりません)が、SVGはある程度動作します(RaphaelはIE6をサポートしています)。
また、アニメーションや描画を行っているだけですか、それともボタン、スライダー、タブコンテナー、リスト、グリッドなどが必要になる可能性のある本格的なアプリを行っていますか。
完全なアプリを作成していて、それをモバイル関連のものでも動作させたい場合は、dojoツールキット(特にdojox.gfxおよびその他のグラフィカルなdojoxライブラリ)を確認してください:http: //archive.dojotoolkit.org/nightly/dojotoolkit/ dojox /
dojox.gfxは、キャンバス、SVG、さらにはSilverlightなどのいくつかのバックエンドをサポートするベクターグラフィックライブラリです。これをラファエルと比較した記事があります: http://www.lrbabe.com/?p = 217
キャンバス用のスタンドアロンシーングラフライブラリについては、cake.js も確認してください。http ://code.google.com/p/cakejs/また、processingjs も確認してください。