一百个上下文与HTML5 Canvas中的一个上下文相比？

Question

我正在创建一个使用Canvas API的简单物理引擎。在性能方面，最佳做法是什么？是为画布中的任何对象创建一个单独的上下文（例如，每个球，框等等），还是只使用一个上下文？后者涉及为每个要重绘的对象定义上下文的路径，以及设置颜色等。

当对象数量接近一百时，使用多个上下文是不是一个坏主意？

我之所以要问，是因为我不想在一百个工作小时之后得到惊喜，因为我采取了错误的做法。

Answer 1

多个画布的性能提升来自于了解为什么您使用多个画布。

除非它们有用，否则不要使用多个画布：

• 画布是价格适中的元素。
• 在移动设备上，画布仍然很慢 - 多幅画布速度较慢。

以下是使用多个画布的一些原因：

您可以在不同时间制作动画。

例如，背景可能每5帧生成一次动画，而更活跃的对象可能会为每一帧设置动画。将背景放在第二个画布上意味着您不必在每个动画帧中绘制背景。

您希望“双倍缓冲”以提高显示速度。

例如，在显示当前帧时，您可以使用第二个画布来组合复杂元素，然后使用displayContext.drawImage（bufferCanvas，0,0）在显示画布上绘制缓冲画布。这使您可以使用动画帧之间的“停机时间”来准备下一帧。

您可以使用画布在单个图像/ drawingElement（模板）上进行变换。

例如，如果您需要物理屏障（例如灰色建筑物的图像）。你可能想要红色，蓝色和绿色的建筑物。您可以在屏幕外的画布上使用灰色建筑图像，并使用上下文的globalCompositeOperation将一个建筑物重新着色为红色，蓝色和绿色变体。这允许您以多种方式重用1个图像资源。

多幅画布还有其他原因，但重点是使用多幅画布来满足需求。