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

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

首先，我假设背景是与画布分开的元素？它看起来像是你没有在画布上重绘那部分。

我问的原因是在同一画布上重复调用clearRect最终会显示性能问题。发生的事情是每次调用clearRect都会累积到画布中的复杂区域 - 实质上是它的透明蒙版。因此，每次必须渲染画布时，无论何时更改它都会发生，它必须处理该透明区域。渐渐地，当您在画布上留下越来越多的小型clearRect路径时，这个区域将变得越来越复杂，性能将下降。

我曾在IE Test Drive网站上使用暴雪演示进行过一次实验，在那里我想知道为什么演示用每个动画帧清除整个画布。所以我试着清理每个雪花后面的小道（并且按照我上面的建议使每个雪花更大一点，因为我有小径）。看起来像是正确的事情，但性能下降了几个数量级。他们在IE团队中询问，他们确认了我所描述的地区行为。

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

在HTML5 / WinJS中制作导弹动画

1 个答案: