如何缓存静态画布区域以获得性能

Question

我正在使用createjs库，我的游戏在背景上有一个大位图，以便以全高清分辨率填充窗口。在较低分辨率下，我使用平移和扫描方法。但是这个动作总是局限在画布的较小区域。

所以我想知道是否有可能，以及如何通过缓存静态区域或使用任何其他技术来获得性能。

为了论证，这里有一个图表来说明我的情况：

我已经尝试使用CSS将背景图片放在canvas元素后面了：

How to center a canvas on top of a background image

但是CSS让我疯了......所以请耐心等待...... ：）

提前谢谢！

Answer 1

在EaselJS中，每个DisplayObject都有一个缓存方法，它正是你想要的 - 它需要绘制的东西并放入屏幕外的画布：http://www.createjs.com/docs/easeljs/classes/DisplayObject.html 之后，它会从画布上获取每个重绘的图像数据（基本上它之后只是一个drawImage调用）。

尝试仅缓存绘制的区域 - 如果缓存空白区域，则会失去性能。但是，如果您的背景只是静态图像，您仍应将其保留为正常的DOM / CSS背景 - 缓存位图不会带来任何性能优势。

Answer 2

我曾经有同样的想法，我认为你要求的是getImageData()和putImageDate()

image = context.getImageData(x,y,width,height);
context.putImageData(image,x,y);

然而，我仍然发现这个性能非常差（对不起，我不能再提供任何实际数字了），并且获得更好性能的最佳和最流行的方式似乎是画布仅用于背景，或者，如果你真的只有静态背景图像，请使用你原本想要的纯CSS。

context.drawImage（）也可以从另一个canvas元素中绘制，也许你可以通过某种方式利用它并创建不可见的“画布缓存”。但我仍然认为学习CSS比实现这样的东西更容易。

Answer 3

我对createjs并不熟悉，但你可以尝试仅在活动区域​​上绘制/清除。这样您就不会在每帧中重绘非活动区域。 如果非活动区域不是完全静态的，则可以为它们使用单​​独的画布元素，并在该区域（非活动区域）上更改某些内容后在主画布上绘制这些元素。我好