我知道将图形预渲染到离屏画布通常会更快。这是一个像圆一样简单的形状吗？以类似游戏的帧速率渲染100个圆圈会有很大的不同吗？ 50圈？ 25？
答案 0 :(得分：4)
要将此问题分解为两个略有不同的问题，您要问的问题有两个方面：
1）在屏幕外绘制一个形状并将其更快地放在屏幕上
2）绘制一次形状并将其复制到100个不同的位置比绘制形状100倍
第一个问题的答案是“它取决于” 这是一种被称为“缓冲”的技术，并不是关于 速度 。
缓冲图像的目的是消除图像的急动
如果您在屏幕上绘制了所有内容，那么当您遍历所有对象并绘制它们时，它们会实时更新。
在NES期间，这是正常的，因为内存空间不大，或者对它做任何事情的能力都很大，并且因为程序员不太了解，他们必须使用有限的指令。 / p>
但这些日子并不是游戏做事的方式
通常情况下，他们会调用一帧的所有绘图更新，然后将整个帧作为完成的图像，并将整个图像粘贴到屏幕上。
默认情况下，GPU（和GL / DirectX）会在称为“双缓冲”的过程中处理此问题
它是一个双缓冲区，因为有用于更新的“进行中”缓冲区的空间，以及保存最后一帧的最终图像的缓冲区，监视器正在读取该缓冲区。
在帧处理结束时，缓冲区将“交换”。新的完整帧将被发送到监视器，旧帧将被其他绘制调用中的新图像数据覆盖。
现在，在HTML5中，没有真正访问帧缓冲区，所以我们自己做;每次绘制调用到屏幕外的画布。完成所有更新后（图像稳定），然后将整个图像复制并粘贴到屏幕画布上。
这里有一个很大的速度优化，称为“blitting”，它基本上仅复制已更改的部分，并重新使用旧图像。
除此之外还有很多其他内容，现在有很多警告，因为我们添加了所有特殊效果，但它确实存在。
问题的第二部分与“实例化”概念有关 实例化与blitting类似，但是blitting只是重新绘制改变的内容，实例化是指在不同的地方多次绘制完全相同的东西。
假设您在Photoshop中绘制了一个森林 你有两个选择：
第二个的缺点是图像的每个“实例”看起来完全相同 如果您的“模板”图像改变颜色或受到损害，那么图像的所有实例也会这样做。 此外，如果您对8000树林有87种不同的树变体，那么制作它们的实例仍然会非常快，但需要更多内存，因为您现在需要比仅仅一棵树节省多87倍的图像，参考每个抽奖电话。
好处是，它仍然快得多。
回答关于X圈的具体问题，与实例1圈相对应：
是的，它仍然会快得多。
然而，“很多”意味着会根据很多不同的东西而改变，因为现在你在谈论PC上的浏览器。
PC有多强？
显卡有多好？
画布在软件像素（不是CSS像素）中有多大？
圆圈有多大？他们有alpha混合吗？
这是用WebGL或软件编写的吗？
如果软件是在硬件模式下合成的画布？
对于典型的PC，你应该仍然可以在Chrome中达到60fps，绘制20个圆圈，我认为（取决于你对他们做了什么...... ......只是在屏幕上绘制它们，每一帧都很简单），所以在这种情况下，实例仍然“更快”，但它并不重要，因为你已经通过了Canvas的性能上限。
我不知道手机/平板电脑或电池供电的笔记本电脑/上网本也是如此。
答案 1 :(得分：1)
是的，从屏幕外的画布转移比甚至像弧形圆的原始图形更快。
那是因为GPU只是从屏幕外的画布复制像素（不需要太多的CPU工作量）