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

Question

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

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

为了论证，这里有一张图表可以说明我的情况：

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

但是CSS快把我逼疯了...所以请多多包涵... :)

提前致谢！

Answer 1

我曾经有过同样的想法，我想你问的是getImageData() and putImageDate()

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

不过，我还是觉得这样的性能很差（对不起，我不能再提供任何实际数字了），最好也是最流行的实现更好性能的方法似乎是第二个 canvas 仅用于背景，或者，如果您真的只有静态背景图像，请像您最初想要的那样使用纯 CSS。

context.drawImage() 也可以从另一个 canvas 元素绘制，也许您可以以某种方式利用它并创建不可见的 "canvas caches"。但我仍然认为学习 CSS 比实现这样的东西更容易。

Answer 2

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

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

Answer 3

我对createjs不熟悉，不过你可以尝试只在活动区域绘制/清除。这样您就不会在每一帧都重新绘制非活动区域。如果非活动区域不是完全静态的，您可以为它们使用单独的 canvas 元素，并在该区域（非活动区域）发生变化后在主要 canvas 上绘制这些元素。我呵呵

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

How to cache static canvas areas in order to gain performance

html

javascript

canvas

easeljs

createjs