1

これに関する他の投稿を見たことがありますが、私を助けるものは何も見つかりません。

動くキャンバスに画像を描いていますが、動くとクリアされていない自分の跡が残ります。この画像を別の画像の上に描画すると、軌跡は表示されませんが、上の画像がちらつきます。私は clearRect がうまくいくとは思わない。

画像アニメーションの間にキャンバスの状態を保存できますか? または、2 番目のキャンバスを使用する必要がありますか?

進め方がよくわからないので、アドバイスをいただければ幸いです

*例を追加 - jsfiddle.net/zE67k/2 に画像とちらつきを追加。jsfiddle.net/zE67k/3 画像とトレイルなし。これは単なる例です。キャンバスの背景画像でもこれを達成しようとしています。

*また、あるキャンバスを別のキャンバスの上に配置しようとしましたが、それでもちらつきが発生します。問題は、clearRect を配置する場所にあると思います。目が描画される直前に clearRect を配置すると機能しますが、このコードが目を描画して更新する方法は一度に 1 つずつ行うため、前の目がクリアされて 1 つだけが残ります。このチュートリアルから試していますhttp://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/

4

1 に答える 1

2

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

// 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);

次に、他の画像/アイテムを描画/移動するときはいつでも、クリーンな状態を復元するだけです:

canvas.getContext('2d').drawImage(buffer);
drawObject(canvas, x, y, w, h);
于 2012-05-03T14:37:11.633 に答える