Sir*_*Sir 5 html javascript canvas
我很好奇在 html 中的 canvas' 之上使用 canvas 是否会影响性能？
我的想法是将任何静止的东西放在一个画布中，然后将任何移动的东西放在另一个画布中……有效地减少发生的重绘次数。
由于我不需要重新绘制任何静止的东西，明智的做法是不要一直清除它并重新绘制它。所以我想在画布上放一个画布……但不确定这是否会导致某种性能下降？
有没有人对此做过基准测试？
这可能会成为一个非常微妙的问题，以至于我担心会给您一个通用基准，告诉您要么做要么做，因为您应该始终对自己的应用程序代码进行基准测试，看看它在哪里可能更快或更慢。一旦你的产品完成了，无论你选择走哪条路，我都强烈建议你以另一种方式重建它，并做一个真正的基准测试并看看。
使用 jsperf 可以轻松设置一个测试，比较在一个画布上绘制背景 + 前景与仅在一个画布上绘制一次背景，然后在第二个画布上绘制前景。
如果您在背景和前景中绘制大致相同数量的内容，那么我认为您会看到单画布比使用两个画布慢 50% 左右。
确实，这就是您所看到的：
http://jsperf.com/one-vs-two-canvases
但请先按住手机。你有静态背景吗？那么为什么要使用两块画布呢？为什么不将该背景设为 PNG 并将其设置为一个画布的 CSSbackground-image并完成它呢？这会更快，并且会让 DOM 不那么混乱，并且您可以完全避免这个问题！
您应该注意，您拥有的层数不一定能够很好地扩展。画布是 DOM 对象，接触 DOM 的速度很慢，因此定位和使用 30 个画布作为 30 层将会产生影响。在某些画布上，使用图层变得不那么值得，但该数字通常高于 5 个。如果您计划使用超过 5 个画布，我强烈建议您使用自己的画布进行基准测试代码看看哪个值得。IE9 分析器和 JSperf 都给出了非常好的结果（JSperf 提供了跨浏览器数据，而 IE9 提供了到底消耗时间的详细信息）。