[解決済み] HTML5 CanvasとSVGとdivの比較

質問

要素をその場で作成し、移動させることができるようにするには、どのような方法がありますか？例えば、矩形、円、多角形を作成し、それらのオブジェクトを選択して移動させたいとします。

HTML5では、これを可能にする3つの要素が提供されていると理解しています。 svg , キャンバス そして ディブ . 私がやりたいことに対して、これらの要素のうちどれが最も良いパフォーマンスを提供できるでしょうか？

これらのアプローチを比較するために、それぞれヘッダー、フッター、ウィジェット、テキストコンテンツを含む、視覚的に同じ3つのウェブページを作成しようと考えていました。最初のページのウィジェットは、すべて canvas 要素で、2番目は完全に svg 要素で、そして3つ目はプレーンな div 要素、HTML、CSSで構成されています。

どのように解決するのですか？

簡単に言うと

SVGなら 簡単 選択と移動がすでに組み込まれているからです。SVGオブジェクトはDOMオブジェクトなので、"click"ハンドラなどがあります。

DIVもいいのですが、不格好な上に ひどい を大量に読み込むパフォーマンス。

Canvasは最高のパフォーマンスを持っていますが、管理された状態のすべての概念（オブジェクトの選択など）を自分で実装するか、ライブラリを使用する必要があります。

長い回答です。

HTML5 Canvasは、単純にビットマップの描画面です。描画するように設定し（色と線の太さを指定して）、そのものを描画すると、Canvas はそのものに関する知識を一切持ちません。矩形を描いて、それを移動させたり選択可能にしたい場合は、そのすべてを一からコーディングしなければなりません。 を含む 描画したことを記憶するコード

一方、SVGはレンダリングする各オブジェクトへの参照を保持する必要があります。作成した SVG/VML 要素はすべて DOM 内の実際の要素になります。デフォルトでは、これによって作成した要素の追跡がずっと容易になり、マウスイベントなどの処理も簡単になりますが、オブジェクトが大量にある場合は著しく遅くなります

SVGのDOM参照は、描画したものを処理するためのフットワークの一部を担っているということです。そして、SVGは 本当に大きな オブジェクトをレンダリングするときは遅くなりますが 多数 オブジェクトを表示します。

ゲームはおそらくCanvasの方が速いでしょう。巨大な地図プログラムなら、おそらくSVGの方が速いでしょう。もしCanvasを使いたいのであれば、移動可能なオブジェクトを作成するためのチュートリアルがいくつかあります。 こちら .

キャンバスは、高速な処理やビットマップの重い操作（アニメーションなど）には適していますが、多くのインタラクティブ性を求める場合は、より多くのコードを必要とします。

HTMLのDIVで作る描画とCANVASで作る描画について、いろいろと検証してみたんだ。それぞれの利点について膨大な記事を書くこともできますが、特定の用途について検討するために、私のテスト結果のうち関連するものをいくつか紹介します。

CanvasとHTML DIVのテストページを作りましたが、どちらも移動可能なquot;nodes.quotを持っていました。Canvasのnodeは私がJavascriptで作り、追跡しているオブジェクトでした。HTMLのノードは移動可能なDivでした。

2つのテストにそれぞれ10万個のノードを追加しました。両者はまったく異なるパフォーマンスを示しました。

HTML テスト タブでは、読み込みに時間がかかりました（時間は 5 分弱く、クロームは最初の 1 回でページを閉じるよう求めました）。クロームのタスクマネージャーは、そのタブが168MBを消費していると表示します。見ているときは12-13%のCPU時間を占め、見ていないときは0%です。

Canvasタブは1秒でロードされ、30MBを占有しています。また、見ているかどうかに関係なく、常に 13% の CPU 時間を消費します。 (2013年編集：ほぼ修正されました)

HTMLページでのドラッグはよりスムーズになりました。これはデザイン上予想されることですが、現在の設定はCanvasテストで30ミリ秒ごとにeverythingを再描画しているためです。この点については、Canvas には最適化がたくさんあります。(canvas の無効化が最も簡単ですが、クリッピング領域、選択的な再描画などもあります。）

この単純なテストでは、Canvas の方が div のようなオブジェクト操作を高速に行えることは間違いありませんし、もちろん読み込み時間もはるかに速くなります。描画や読み込みはCanvasの方が速く、最適化の余地もはるかにあります（つまり、画面外にあるものを除外するのは非常に簡単です）。

おわりに

• SVGは、おそらくアプリケーションやアイテム数の少ないアプリに適している（1000未満？ 実際には依存する）。
• キャンバスは、数千のオブジェクトや慎重な操作に適していますが、より多くのコード（またはライブラリ）が必要です。
• HTMLのDivは不格好で、拡大縮小ができません。円を作るには角を丸くする必要があり、複雑な図形を作ることは可能ですが、ピクセル幅の小さな小さなDivを何百も使用しなければなりません。狂気が続いています。