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

Question

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

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

我问的原因是因为我不想在一百个工作小时之后得到一个惊喜，因为我采取了错误的方式这样做。

Answer 1

多帆布的性能提升来自于知道为什么你使用多个画布。

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

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

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

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

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

你想“双缓冲”来提高显示速度。

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

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

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

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