要素をオンザフライで作成し、移動できるようにするには、どのような方法が最適ですか? たとえば、長方形、円、多角形を作成し、それらのオブジェクトを選択して移動したいとします。
HTML5 ではこれを可能にする 3 つの要素が提供されていると理解しています。画像、キャンバスそして分割私がやりたいことに対して、これらの要素のうちどれが最高のパフォーマンスを発揮するでしょうか?
これらのアプローチを比較するために、私は、それぞれヘッダー、フッター、ウィジェット、テキスト コンテンツを含む、視覚的に同一の Web ページを 3 つ作成することを考えていました。最初のページのウィジェットは完全に 要素で作成しcanvas、2 番目のページは完全に 要素で作成しsvg、3 番目のページはプレーンdiv要素、HTML、および CSS で作成します。
ベストアンサー1
短い答え:
SVG は選択と移動がすでに組み込まれているため、より簡単です。SVG オブジェクトは DOM オブジェクトであるため、「クリック」ハンドラーなどが備わっています。
DIV は問題ありませんが、扱いにくく、大量に読み込むとパフォーマンスがひどく低下します。
Canvas はパフォーマンスが断然最高ですが、管理された状態 (オブジェクトの選択など) の概念をすべて自分で実装するか、ライブラリを使用する必要があります。
長い答え:
HTML5 Canvas は、ビットマップの描画面にすぎません。描画するように設定し (色と線の太さを指定するなど)、描画すると、Canvas はその描画について何も知りません。描画した場所や描画した内容はわかりません。描画した内容は単なるピクセルです。四角形を描画して移動させたり選択可能にしたい場合は、描画したことを記憶するコードを含め、すべてを最初からコーディングする必要があります。
一方、SVG はレンダリングする各オブジェクトへの参照を維持する必要があります。作成するすべての SVG/VML 要素は、DOM 内の実際の要素です。デフォルトでは、これにより、作成した要素をより適切に追跡でき、マウス イベントなどの処理がデフォルトで簡単になりますが、オブジェクトの数が多い場合は大幅に遅くなります。
これらの SVG DOM 参照は、描画したものを処理するための作業の一部が自動的に行われることを意味します。また、SVG は、非常に大きなオブジェクトをレンダリングする場合は高速ですが、多数のオブジェクトをレンダリングする場合は低速になります。
ゲームはおそらくCanvasの方が速いでしょう。巨大なマッププログラムはおそらくSVGの方が速いでしょう。Canvasを使いたいなら、移動可能なオブジェクトを立ち上げて実行するためのチュートリアルがあります。ここ。
Canvas は、より高速な処理や大量のビットマップ操作 (アニメーションなど) に適していますが、多くのインタラクティブ性が必要な場合は、より多くのコードが必要になります。
HTML DIV による描画と Canvas による描画を比較して、さまざまな数値を計算しました。それぞれの利点について長い記事を書くこともできますが、ここでは、特定のアプリケーションで検討するための、関連するテスト結果をいくつか紹介します。
私は Canvas と HTML DIV のテスト ページを作成しましたが、どちらにも移動可能な「ノード」がありました。Canvas ノードは、私が作成して JavaScript で追跡したオブジェクトです。HTML ノードは移動可能な Div です。
2 つのテストそれぞれに 100,000 個のノードを追加しました。パフォーマンスはまったく異なりました。
HTML テスト タブの読み込みに非常に時間がかかりました (5 分弱かかり、Chrome は最初にページを終了するように要求しました)。Chrome のタスク マネージャーによると、タブは 168 MB を占めています。タブを見ているときは CPU 時間の 12 ～ 13% を占め、見ていないときは 0% です。
Canvas タブは 1 秒で読み込まれ、30 MB を占有します。また、見ているかどうかに関係なく、常に CPU 時間の 13% を占有します。(2013 年編集: この問題はほとんど修正されました)
HTML ページ上のドラッグはよりスムーズになりました。これは設計上予想されることです。現在の設定では、Canvas テストで 30 ミリ秒ごとにすべてを再描画するようになっているためです。これについては、Canvas に多くの最適化を施すことができます。(最も簡単なのは、canvas の無効化です。また、クリッピング領域、選択的な再描画などもあります。実装したいかどうかは、あなた次第です)
この簡単なテストの div と同じように、Canvas のオブジェクト操作を高速化できることは間違いありません。もちろん、読み込み時間も大幅に短縮されます。Canvas では描画/読み込みが高速化され、最適化の余地も大幅に広がります (つまり、画面外のものを除外するのは非常に簡単です)。
結論：
- SVG は、おそらく、アイテム数が少ないアプリケーションやアプリ (1000 未満? 状況によります) に適しています。
- Canvas は数千のオブジェクトや慎重な操作に適していますが、それを実現するにはさらに多くのコード (またはライブラリ) が必要です。
- HTML div は扱いにくく、拡大縮小もできません。円は角を丸くすることでしか作成できません。複雑な図形の作成も可能ですが、ピクセル幅の小さな div が何百個も必要になります。狂気の沙汰です。