javascript - HTML5キャンバスアニメーションの問題

Question

アニメーションを作成するために、HTML5キャンバスを試しています。私の最終的な目標は、気まぐれで特定の場所にボックスをアニメーション化できるようにすることです。今のところ、画面全体でボックスをアニメーション化するだけです。画面上で移動すると、黒い跡が残ります。背景グリッドを削除せずに、この「ダーティ」セクションをクリアするにはどうすればよいですか。

コードのjsFiddleはここにあります

Answer 1

2つのソリューション

• 新しい場所に移動する前に、アニメーションの上部に背景を再描画します。このいわゆるダーティスプライトテクニック-より速く-より複雑。

• フレーム間でキャンバス全体を再描画します

背景の描画が複雑な操作である場合は、準備した背景を別のキャンバスにバッファリングして速度を上げるだけです。

Answer 2

表示したくない場合は、描画したものをクリアする必要があります。グリッドの再描画とCPUサイクルの消費を避けるために、キャンバス全体をクリアしたくないと思います。これは別の方法で行う必要があります。

可能な解決策：

• 2つの同じ画面上のキャンバスを重ねて配置します。下のキャンバスにグリッドを描画し、クリアしないでください。トップキャンバスの一部をクリアして、その上に再描画します。
• 1つのオンスクリーンキャンバスと1つのオフスクリーンキャンバスがあります。オフスクリーンキャンバスにグリッドを描画します。アニメーション化するたびに、画面上のキャンバス全体をクリアし、準備したグリッドを他のグリッドからコピーして、必要なものをその上に描画します。