javascript - 糟糕的 Canvas GetImageData()/PutImageData() 在移动设备上的性能

Question

我正在做一个 HTML5 小游戏，在 map 开头加载 Sprite 时，我使用 GetImageData() 进行一些处理/遍历所有图像/PutImageData()。

这在我的 PC 上运行得非常好，但是，在我的手机上它慢得可怕。

PC: 5-6 ms
iPhone 4: 300-600 ms
Android HTC Desire S: 2500-3000 ms

我一直在做一些非常基本的基准测试，GetImageData 和 PutImageData 都运行得非常快，循环内容需要很长时间。

现在，我显然预计手机会变慢，但 1000 倍听起来有点过分，而且在我的 HTC 上加载大约需要 4 分钟，所以这是行不通的。此外，游戏中的其他所有内容都以非常合理的速度运行(主要是因为屏幕小得离谱，但对于手机上的 JS，它仍然运行得非常好)

---

我在这个处理中所做的基本上是将 Sprite “变暗”到一定程度。我只是循环遍历所有像素，然后将它们乘以一个 < 1 的值。就是这样。

因为这太慢了...有没有更好的方法来做同样的事情，使用 Canvas 功能(合成、不透明度等)，而不用一个一个地遍历所有像素？

注意:此层有一些 100% 透明像素和一些 100% 不透明像素。两者都需要保持 100% 不透明或 100% 透明。

我认为行不通的事情:
1) 在新 Canvas 上绘制 Sprite ，降低不透明度。这行不通，因为我需要 Sprite 保持不透明，只是更暗。
2) 绘制 Sprite ，并在它们上面绘制一个半透明的黑色矩形。这会使它们变暗，但也会使我的透明像素不再透明......

有什么想法吗？

这是我正在使用的代码，以防万一您在其中看到一些非常愚蠢的东西:

function DarkenCanvas(baseImage, ratio) {
    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.width = baseImage.width;
    tmpCanvas.height = baseImage.height;
    var ctx = tmpCanvas.getContext("2d");
    ctx.drawImage(baseImage, 0, 0);

    var pixelData = ctx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
    var length = pixelData.data.length;
    for (var i = 0; i < length; i+= 4) {
        pixelData.data[i] = pixelData.data[i] * ratio;
        pixelData.data[i + 1] = pixelData.data[i + 1] * ratio;
        pixelData.data[i + 2] = pixelData.data[i + 2] * ratio;
    }

    ctx.putImageData(pixelData, 0, 0);
    return tmpCanvas
}

编辑:这是我尝试对图像进行处理的示例:
原文:http://www.crystalgears.com/isoengine/sprites-ground.png
变暗:http://www.crystalgears.com/isoengine/sprites-ground_darkened.png

谢谢!
丹尼尔

Answer 1

Phrogz 的想法很正确。您真的只想使用“source-atop”globalCompositeOperation 在整个对象上绘制半透明(或比例透明)黑色。

像这样:http://jsfiddle.net/F4cNg/

实际上有一个关于像这样复杂的暗化的好问题，但作者删除了它，这真是一种耻辱。在绘制的东西上制作深色蒙版当然是可能的，即使是复杂的形状。它们可能对您没有帮助，但是为了完整起见，并且对于任何搜索“暗 Canvas ”东西的人来说，其中某些部分保持浅色(禁区)，可以使用“xor”globalCompositeOperation 来完成，如下所示:

http://jsfiddle.net/k6Xwy/1/