javascript - 在 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 上绘图具有一些内置的抗锯齿功能。这意味着，如果您使用一种颜色绘制一条线，然后使用背景颜色绘制相同的线，则不会删除原始线。这里可能会发生类似的情况，在这种情况下，一些额外的像素应该会有所帮助。

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

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

我问的原因是，在同一 Canvas 上重复调用clearRect最终会出现性能问题。所发生的情况是，每次对clearRect的调用都会累积到 Canvas 内的一个复杂区域中——本质上是它的透明度蒙版。因此，每次必须渲染 Canvas 时(每次更改 Canvas 时都会发生这种情况)，它都必须处理该透明区域。逐渐地，当您在 Canvas 上留下越来越多的小clearRect轨迹时，该区域将变得越来越复杂，性能也会下降。

我曾经在 IE Test Drive 网站上用暴雪演示做过这个实验，我想知道为什么演示会在每个动画帧时清除整个 Canvas 。所以我尝试清理每片雪花后面的踪迹(并按照我上面的建议将每个雪花做得更大一点，因为我有踪迹)。看起来这是正确的做法，但性能却下降了几个数量级。在 IE 团队内部询问后，他们证实了我所描述的区域行为。

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