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

Question

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

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

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

Answer 1

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

除非它们有用,否则不要使用多个画布:

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

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

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

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

你想"双缓冲"来提高显示速度.

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

您可以使用画布在单个图像/ drawnElement(模板)上进行变换.

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

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