html5キャンバスアニメーション。画像を動かすとちらつきや痕跡が出る

Question

私はこれについて他の投稿を見ましたが、私を助けてくれるものは何も見つかりません。

移動するキャンバス上にイメージを描画しています。移動すると、キャンバスが移動してその後ろのトレイルが残っています。この画像を別の画像の上に描画すると、軌跡は得られませんが、上の画像はちらつきます。私はclearRectが私のために働くとは思わない。

イメージアニメーションの間にキャンバスの状態を保存できますか？または、2番目のキャンバスを使用する必要がありますか？画像やちらつきをjsfiddle.net/zE67k/2 -

私は何かアドバイスが *

素晴らしいことだ、続行するかどうかは非常にわからないでは例を追加しました。 jsfiddle.net/zE67k/3イメージとトレイルなし。これは単なる例です、私はキャンバスへの背景イメージでもこれを達成しようとしています。

*また、キャンバスを別のキャンバスの上に置いてみましたが、まだちらつきがあります。私はclearRectを配置する場所が問題だと思います。目が描画される直前にclearRectを置くと動作しますが、このコードで描画する方法と目を更新する方法は1度に1つしかありませんので、以前の目は1つしか残されません。 http://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/

Answer 1

他の画像を描画する前にクリーンキャンバスを保存し、移動した画像を再度描画する前に保存されたクリーン状態を復元する必要があります。あなたはクリーンな状態を保存するために追加のキャンバスを使用することができます。

// create clean buffer 
var buffer = document.createElement('canvas'), 
    canvas = document.getElementById('myCanvas'); 

buffer.width = canvas.width; 
buffer.height = canvas.height; 

// draw "background"/clean state to canvas 
drawBackground(canvas); 

// save clean state 
buffer.getContext('2d').drawImage(canvas); 

その後、あなたは他の画像/項目は、単にきれいな状態を復元移動/描画したいwhenver：

canvas.getContext('2d').drawImage(buffer); 
drawObject(canvas, x, y, w, h); 

は