动画画布中的对象

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

通常，在画布上仅绘制ADDS新图形-要制作动画，您必须擦除每帧背景。 具体来说，您需要具有可重复调用的绘图函数，其中：

1. 清除画布（绘制一个大的背景色矩形或所需的任何背景）
2. 然后绘制所有正在移动的对象。

使用固定的时间段（如您所做的那样为30ms）会遇到各种问题-一旦使它起作用，就可以查看堆栈溢出，以找出如何将该帧速率与浏览器重绘周期进行匹配。

Answer 2

尝试以下方法：

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

演示