Question

我正在制作一款游戏，并且在使用drawImage将一个画布绘制到另一个画布时遇到了一些性能问题。根据Chrome的Profiler，我只花了60％的时间用于这一次drawImage调用，10％用于它上面的clearRect ...

源画布现在大概是3000x3000（这个很小，我会说），目标画布是1024x768。

我认为不是绘制所有的瓷砖;墙壁等等每个循环（这给我大约15fps），将它们全部绘制到离屏画布然后将其绘制到我的主画布上，然后在顶部绘制实体等可能会更快。这给了我~30fps但是......这是我用软件渲染得到的最好的吗？

我的渲染循环基本上是：

ctx.clearRect(0, 0, 1024, 768);

ctx.beginPath();
ctx.drawImage(map, cam.position.i, cam.position.j, 1024, 768, 0, 0, 1024, 768);
ctx.closePath();

ctx.save();
ctx.translate(-cam.position.i, -cam.position.j);
// draw entities, etc.
ctx.restore();

除了开始使用WebGL（利用其硬件加速）或等待供应商为2D环境实现硬件加速之外，我无法真正想要做什么。但是，我宁愿不做其中任何一个，所以任何输入都会受到赞赏。

Answer 1

哇，这是一个大型的屏幕外画布。缓冲区的存储空间大约为36MB。

我很想使用较小的屏幕外的瓷砖，例如： 1024x124并在主画布上绘制可见的。为了节省内存，您最初只能创建可见的图块，然后在它们变得可见时生成其他图块。（你可以处理，甚至更好地回收那些不再可见的）。

我不相信建议您使用putImageData的答案会提供更好的效果，因为此处提问者的体验表明：why-is-putimagedata-so-slow

Answer 2

对每个“精灵”使用getImageData可能会更快，并在Javascript中保持对imageData数组的引用，并使用putImageData渲染到目标画布。

您仍然可以使用不可见的源画布和每个tile / sprite上的getImageData渲染精灵。它将使用更多内存，但可能比使用源和目标画布的drawImage更快。

HTML / Canvas - 另一个画布的drawImage性能

2 个答案: