在HTML5/WinJS中制作导弹动画

Question

我正在Windows 8上使用HTML5/WinJS编写一个游戏。我试图产生子弹或导弹发射物体的效果；然而，我似乎无法让物体通过背景中的另一个图像而不拖曳边框。我的工作理论是，我看到的边界是由使用clearRect引起的。下面是我的代码：

var moveBullet = function(missile) {

    if (missile.Image == undefined || missile.Image == null) {
        var image = new Image();
        image.src = "/images/missileImg.png";
        image.onload = function () {
            canvasContext.clearRect(missile.PointX - (image.width / 2), missile.PointY, image.width, image.height);
            missile.PointY += BULLET_SPEED;
            canvasContext.drawImage(image, missile.PointX - (image.width / 2), missile.PointY);
        };
    } else {
        canvasContext.clearRect(missile.PointX - (missile.Image.width / 2), missile.PointY, missile.Image.width, missile.Image.height);
        missile.PointY += BULLET_SPEED;
        canvasContext.drawImage(missile.Image, missile.PointX - (missile.Image.width / 2), missile.PointY);
    }
}

有没有一种方法可以在不使用clearRect的情况下实现这种效果，或者有一种更有效的方法来恢复经过的背景？

Answer 1

使您的clearRect区域比导弹图像大几个像素。在画布上绘制通常具有一些内置的抗锯齿功能。这意味着，如果您使用一种颜色绘制一条线，然后使用背景色绘制相同的线，则不会删除原始线。类似的事情可能会在这里发生，在这种情况下，一些额外的像素应该会有所帮助。

也就是说，这里有一个需要注意的问题。

首先，我假设背景是与画布分开的元素？它看起来很像，因为您没有在画布上重新绘制该部分。

我问这个问题的原因是，在同一个canvas上反复调用clearRect最终会出现性能问题。发生的情况是，对clearRect的每次调用都会累积到画布中的一个复杂区域中--本质上是它的透明掩码。所以每次画布需要渲染的时候，每当你改变它的时候，它都必须处理那个透明的区域。渐渐地，当您在画布上留下越来越多的小clearRect踪迹时，这个区域将变得越来越复杂，性能将会下降。

我曾经在IE Test Drive网站上用暴雪的演示程序做过这个实验，我想知道为什么演示程序要清除每个动画帧的整个画布。所以我试着清理每一片雪花后面的痕迹(并按照我上面的建议把每一片雪花做大一点，因为我有足迹)。这似乎是正确的做法，但性能却下降了几个数量级。在IE团队内部询问后，他们确认了我所描述的区域行为。

所以，实际上，最好的做法是在整个画布上对每一帧进行clearRect，然后重新绘制导弹和您正在设置动画的任何其他部分。这可能看起来与直觉相反，但最终效果最好，并避免了像素跟踪的所有这些小故障。