在HTML5/WinJS中制作导弹动画

Animating a missile in HTML5/WinJS

本文关键字：动画 HTML5 WinJS      更新时间：2023-09-26

我在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，或更有效的方式来恢复背景，因为它移动过去?

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

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

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

我问的原因是，在同一画布上重复调用clearRect最终会显示性能问题。发生的情况是，对clearRect的每次调用都会累积到画布内的一个复杂区域中——本质上是它的透明蒙版。每次画布要被渲染的时候，当你改变它的时候，它都要处理那个透明区域。渐渐地，当你在画布上留下越来越多的小clearRect轨迹时，这个区域将变得越来越复杂，性能将下降。

我曾经在IE Test Drive网站上用暴雪的演示做过这个实验，我想知道为什么演示会在每个动画帧中清除整个画布。所以我试着清理每一片雪花后面的痕迹(并把每一片都弄大一点，就像我上面建议的那样，因为我有痕迹)。这似乎是正确的做法，但性能却直线下降了几个数量级。在IE团队中，他们证实了我所描述的区域行为。

所以最好的做法是，在整个画布上对每一帧做一个clearRect，然后重新绘制导弹和你要动画的其他部分。这可能看起来违反直觉，但最终效果最好，并避免了所有这些像素轨迹的故障。
相关文章：