javascript - キャンバス内のオブジェクトのアニメーション化

Question

jsfiddle : http://jsfiddle.net/Z2YSt/173/

コード ：

function createShipMissil(x, y, imgw, imgh) {
            MissileCtx.save();
            MissileCtx.clearRect(0, 0, imgw, imgh);
            MissileCtx.fillStyle = "rgba(0,200,0,1)";
            MissileCtx.fillRect(x, y, imgw, imgh);
            MissileCtx.restore();
            y -= 1;
            setTimeout(function () { createShipMissil(x, y, imgw, imgh); }, 30);

        }

私の問題は、線を引くと連続して見えることです。四角形が動いているように見えるように変更するにはどうすればよいですか?

Answer 1

一般に、キャンバスへの描画は新しいグラフィックのみを追加します。アニメーションを行うには、フレームごとに背景を消去する必要があります。具体的には、繰り返し呼び出される描画関数が必要です。

1. キャンバスをクリアします (大きな背景色の長方形または必要な背景を描画します)
2. 次に、動いているすべてのオブジェクトを描画します。

固定時間 (30 ミリ秒) を使用すると、さまざまな問題が発生します。これが機能するようになったら、スタック オーバーフローを調べて、このフレームレートをブラウザーの再描画サイクルに一致させる方法を見つけます。

Answer 2

代わりにこれを試してください：

MissileCtx.clearRect(x, y, 1, 30);

デモ