javascript - 用HTML5/WinJS制作导弹动画

我正在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网站上使用Blizzard演示进行了此实验，我想知道为什么该演示会在每个动画帧中清除整个画布。因此，我尝试清除每个雪花后面的小径（并按照我上面的建议，使每个大一点，因为我有小径）。看起来好像做对了，但是性能却下降了几个数量级。在IE团队内部询问时，他们证实了我描述的区域行为。

因此，实际上最好的方法是在每一帧的整个画布上进行一次clearRect，然后重新绘制导弹和要设置动画的任何其他位。这可能看起来与直觉相反，但最终效果最佳，并避免了所有带有像素痕迹的故障。

关于javascript - 用HTML5/WinJS制作导弹动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16294141/