2

我为我的游戏编写了一个小型图形引擎，它在一棵树中有多个画布（这些画布基本上代表图层。）每当图层中的某些内容发生变化时，引擎会将受影响的图层标记为“污染”，并且在渲染代码中受影响最低图层通过 drawImage() 复制到其父级，然后复制到其父级，依此类推，直到根图层（屏幕上的画布）。这可能导致每帧多次调用 drawImage()，但也防止重新渲染低于受影响的层。然而，在没有任何变化的帧中，不会发生渲染或 drawImage() 调用，而在只有前景对象移动的帧中，渲染和 drawImage() 调用是最少的。

我想将此与使用多个屏幕画布作为图层进行比较，如本文所述：

http://www.ibm.com/developerworks/library/wa-canvashtml5layering/

在屏幕上的画布方法中，我们在每层的基础上处理渲染，并让浏览器处理在屏幕上正确显示层。从我所做的研究和我读过的所有内容来看，这似乎被普遍认为可能比使用 drawImage() 手动处理更有效。所以我的问题是，浏览器能否比我更有效地确定需要重新渲染的内容，尽管我知道每一帧到底发生了什么变化？

我已经知道这个问题的答案是“双管齐下”。但为了获得准确的数据，我需要实际应用程序，而这需要几个月的时间。到那时，如果我有一个可以接受的方法，我就会有更大的鱼要炸。所以我希望有人一直在这条路上，可以提供一些洞察力。

4

1 回答 1

2

当涉及到 canvas 元素和渲染时，浏览器无法确定任何内容，因为它是一个被动元素 - 其中的所有内容都是用户通过 JavaScript 渲染的。浏览器唯一要做的就是将画布上的内容通过管道传输到显示器（当需要重新分配其位图时，不时清除它更烦人）。

不幸的是，对于什么是最佳优化没有黄金法则/答案，因为这会因情况而异 - 可以提到许多技术，但它们只是您可以使用的工具，但您仍然必须弄清楚会是什么为您的特定情况选择正确的工具或正确的工具组合。也许分层在一种情况下是好的，也许它不会给另一种情况带来任何好处。

一般来说，优化在很大程度上是对特定于场景的模式的深入分析和分解，然后将其隔离和优化。如果经常进行实验，基准测试，重新调整，实验，基准测试，重新调整，实验，基准测试，重新调整的过程......当然经验会将这个过程减少到最低限度，但即使有经验，细节也会有多种仍然需要根据情况进行一些微调的组合（假设它们不相同）。

即使您为当前项目找到了一个很好的配方，它也不会在您的下一个项目中发挥最佳效果。这也是没有人能准确回答这个问题的原因之一。

但是，当涉及到画布时，您想要实现的是最少的清晰操作和最少的重绘区域（drawImage 或形状）。图层的重点是将元素组合在一起以实现此目标。

于 2013-08-10T16:37:00.140 回答