javascript - HTML5 Canvas Ghosting Animationの問題？

Question

私はjavascriptを使用して適切なHTML5アニメーションを実行し、アニメーションフレームを要求する方法について多くのチュートリアルを見てきましたが、デモでも、再描画される画像が一瞬だけゴースト画像を残しているように、アニメーションがぼやけているように見えます。しかし、その後、この問題を修正したように見える、Microsoftが移植したバージョンのカットロープのようなゲームが表示されます。このキャンバス効果を目立たなくする方法を知っている人はいますか？

Answer 1

あなたが抱えている問題は、前の画像がクリアされる前に新しい画像が再描画されていることだと思います。キャンバスがクリアされていること、または少なくとも画像が再描画されている領域を確認することをお勧めします。ただし、キャンバス全体をクリアするのではなく、キャンバスの特定のセクションをクリアするのではなく、特定のサイズ（約800x600）までは、キャンバス全体をクリアする方が高速でした。

（進行中の）ゲームにキャンバスを使用しています：http ：//www.dacheng.me/dBoom

JSソースコードを自由に閲覧してください！

Answer 2

あなたが探しているのはウィンドウバッファリングだと思います。

http://en.wikipedia.org/wiki/Multiple_buffering

基本的には、完全に描画された後に交換される2つの異なるウィンドウ/キャンバス要素を使用して、完全に描画された「フレーム」を切り替えることを目的としています。この手法は、OpenGLおよび現在存在する他のほとんどすべての正規のグラフィックプログラムで使用されています。