动画画布内的对象

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

<强> Demo