html - キャンバス対 HTML DOM?

Question

本当に小さなゲームのようなものをやりたいです。ここです。

ユーザー: honza パスワード: honza

canvas と HTML DOM のどちらを使用すべきかわかりません。セクションを変更し、ズームして移動するときに、約20枚の写真（青いブロックに10枚、灰色のブロックに10枚）を再描画したいだけです。動く人がいるのだろう。あなたの意見は何ですか？キャンバスまたは HTML DOM を使用する必要がありますか?

Answer 1

DOM での操作 (物の移動、アニメーション化、色の変更など) は、ブラウザーに要素の再描画とリフローを引き起こします。これはリソースを消費するプロセスです。特に、ブラウザーの処理を絶えずトリガーする絶え間ない視覚的な更新が多数ある場合は、ローエンド システムの場合、速度が遅く、遅延が発生します。

一方、キャンバスは、<canvas>要素が同じサイズになるため、それほど多くはありません。そのためreflow、アニメーションなどrepaintは<canvas>.

詳細な説明については、http ://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ を参照してください。

Answer 2

単純な古い DOM 要素を使用してゲームに必要なすべてのアニメーションを実行できる場合は、それで十分だと思いますが、あらゆる種類の複雑なアニメーションについては、キャンバスを使用することをお勧めします。

あなたが説明したことは、人の動きに非連続的なアニメーションが含まれないと仮定すると、DOMで完全に実行できるようです。キャンバスを使用せずに比較的複雑なアニメーションを作成できますが、キャンバスを使用して同じことを行うよりもはるかに多くの作業が必要です。

新しいことを学ぶためにこれを行っている場合は、将来的により役立つキャンバスを選択してください。