私は最近、html5 キャンバスを使った開発に夢中になっています。では、プレーンな html よりもいつ優先すべきでしょうか? 私が知りたいのは、パックマンのようなゲームを開発する必要があることを考えると、どちらを使用するのが良いかということだけです? (描画アプリケーションの場合、キャンバスは div を使用するよりもはるかに便利です)
たとえば、pacman の 2 つの実装を次に示します。
canvas と html div と js を使用してブラウザ ゲームを開発することの長所と短所を知りたいです。また、いつキャンバスを使用する方が良いのか、プレーンな html と js を使用する方が良いのはいつなのかを知りたいです。
下位互換性が問題にならない場合は、 を使用してください<canvas>。これは、まさにそのために設計されたものです。
ピクセルの配列は、ページ上のすべてのドットに対して DOM 要素を作成するよりもはるかに効率的です。
ゲームのようなものでのキャンバスと html (dom) の使用の主な違いの 1 つは、フックするマウス イベントを提供することでオブジェクトの管理を支援する dom と、JavaScript でそれらを管理することとの間のトレードオフであると私は信じています。あなた自身。
ゲームにキャンバスを使用する場合、すべてのマウス イベントを自分で処理する必要があります。これを行うのに役立つライブラリがあり、そのようなライブラリの 1 つがEaselJSです。このライブラリは、キャンバス内のオブジェクトにリスナーを簡単に追加するのに役立ちます。
明らかに、すべてのオブジェクトを dom に配置する必要はありません。スクロールなどが必要な場合は、パフォーマンスが大幅に向上します。Google マップのフュージョン テーブル レイヤーを例にとると、キャンバスを使用してマップ上に数千のマーカーをレンダリングし、優れたユーザー エクスペリエンス、これは dom を使用するときには不可能なことでした。
したがって、キャンバスでオブジェクトを管理するためのトレードオフ、ライブラリ、およびより多くのコードがすべてです-ただし、パフォーマンスのメリット、またはhtml（dom）での開発の容易さを享受できますが、多くのオブジェクトでパフォーマンスが低下する可能性があります.
単純な 2D ゲームの場合は、キャンバスを使用します。
3D ゲームの場合は、WebGL ( opengl のネイティブ ブラウザー実装) と、おそらく webgl API をラップする copperlicht のような webgl エンジンを調べる必要があります。WebGL を使用して 2D ゲームを実行することもできます。2D ゲームのグラフィックスが重い場合、webgl はキャンバスよりも高速です。
もちろん、Flash ソリューションもありますが、私はそうはいきません。
編集: 理論的には、キャンバスだけで 3D ゲームを作成することもできますが、それは車輪の再発明を意味します (変換など)。
グラフィック用の HTML と DOM は低速ですが、古いブラウザーでも動作します。
Canvas は非常に高速ですが、最新のブラウザーでしか機能しません。
したがって、ターゲット グループが最新のスマートフォンまたは最新のブラウザである場合は、間違いなくキャンバスを選択してください。さらに、特定の特殊効果やパーティクルが必要な場合、これは DOM では実際には実行できないため、Canvas を使用する以外に方法はありません。