javascript - 如何缓存静态 Canvas 区域以获得性能

Question

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

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

为了论证，这里有一张图表来展示我的情况:

我已经在此处尝试使用 CSS 将背景图像放在 Canvas 元素后面:

How to center a canvas on top of a background image

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

提前致谢!

Answer 1

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

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