0

我正在 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 的情况下实现这种效果，或者在背景移动时恢复背景的更有效方法？

4

1 回答 1

2

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

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

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

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

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

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

于 2013-04-30T16:09:34.990 回答