我正在创建一个使用 Canvas API 的简单物理引擎。就性能而言，最佳实践是什么？是为画布中的任何对象（例如，为每个球、盒子等）创建一个单独的上下文，还是只使用一个上下文？后者涉及为要重绘的每个对象定义上下文路径，以及设置颜色等。
当对象数量接近一百时，使用多个上下文是不是一个坏主意？
我之所以问，是因为我不想在一百个工作小时后得到惊喜，因为我走错了路。
问问题
4031 次
1 回答
6
使用多个画布的性能提升来自于了解您使用多个画布的原因。
不要使用多个画布，除非它们有用：
- 画布是适度昂贵的元素。
- 在移动设备上，画布仍然很慢——多个画布更慢。
以下是使用超过 1 个画布的一些原因：
你有在不同时间动画的图纸。
例如，背景可能每 5 帧动画一次，而您更活跃的对象可能每帧动画一次。在第二个画布上拥有背景意味着您不必在每个动画帧都绘制背景。
您想“双缓冲”以提高显示速度。
例如，在显示当前帧时，您可以使用第二个画布来组装一个复杂元素，然后使用 displayContext.drawImage(bufferCanvas,0,0) 在显示画布上绘制缓冲区画布。这使您可以使用动画帧之间的“停机时间”来准备下一帧。
您使用画布对单个图像/drawnElement（模板）进行更改。
例如，如果您需要物理屏障（例如灰色建筑物的图像）。您可能会想要红色、蓝色和绿色的建筑物来获得多样性。您可以在屏幕外的画布上显示灰色的建筑图像，并使用上下文的 globalCompositeOperation 将该建筑重新着色为红色、蓝色和绿色的变体。这使您可以以多种方式重用 1 个图像资源。
多个画布还有其他原因，但重点是使用多个画布来满足需求。
于 2013-09-08T18:45:44.177 回答