2012-03-11 13 views
6

thisのようなアニメーションをキャンバスまたはsvg(パフォーマンスの点で)にする方が良いかどうか疑問に思っていましたか?私は今jqueryで書き直していますが、変更されるたびにキャンバスが再描画されることをどこかで読んでいます。アニメーションSVGまたはCanvas?

答えて

9

これらの「シンプルな」アニメーションとシーングラフでは、SVGまたはCanvasのパフォーマンスを賢明に使用しても問題ありません。どちらもパフォーマンス上の問題なしで正常に動作するはずです。

しかし、キャンバスに比べてSVGでアニメーションを作成する方が簡単かもしれません。 キャンバスでは、シーン全体を再描画しなければならず、SVGで一度リングを作成してから変換(回転)を定義するだけで済みます。

SVGについてd3.jsraphaelをチェックアウトして、キャンバスのためにあなたがprocessingjsfabric.jskinetic.jsまたは

+0

キャンバスに円か何かを描くpaper.jsをチェックアウトすることができ、それにイベントを追加することが可能ですキャンバス?そしてSVG?あなたが送った素晴らしい例:) – BigChief

+3

純粋なCanvasでは、プリミティブ/シェイプにイベントを添付することはできません。ヒット検出用のコードを記述する必要があります(マウスの位置が円の内側にあるかどうかを確認してください)。しかし、上記のキャンバス・ライブラリーは、通常、抽象レイヤーを持つため、図形のイベントをサポートすることがあります。 SVGは外形のイベントをサポートしているため、SVGでのインタラクションがCanvasよりも実装が簡単な理由です。 –

+0

申し訳ありませんが、イベントを追加するためにライブラリの1つでキャンバスを使うつもりです。 – BigChief

関連する問題