1

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

        }

我的问题是，当画线时，它看起来是连续的。我怎样才能改变它，让它看起来像一个移动的矩形？

4

2 回答 2

1

通常在画布上绘图只会添加新图形 - 要制作动画，您必须擦除每一帧的背景。具体来说，您需要有一个重复调用的绘图函数：

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

使用固定的时间段（如您所用的 30 毫秒）会出现各种问题 - 一旦您完成这项工作，请查看堆栈溢出以找出如何将此帧速率与浏览器重绘周期相匹配。

于 2013-07-29T12:48:57.957 回答
0

试试这个：

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

演示

于 2013-07-29T12:52:12.823 回答