现在，我需要在画布上绘制许多图像。画布大小为800x600px，我有很多256x256px（有些较小）的图像可以在它上面绘制，这些小图像将在画布上组成一个完整的图像。我有两种方法来实现它。
首先，如果我使用画布2D上下文，即context = canvas.getContext('2d')，那么我可以使用context.drawimage()方法将每个图像放在画布的正确位置。
另一种方式，我使用WebGL在画布上绘制这些图像。这样，对于每个小图像，我都需要绘制一个矩形。矩形的大小与此小图像相同。此外，矩形位于画布的正确位置。然后我用图像作为纹理来填充它。
然后，我比较这两种方法的表现。他们的fps都会达到60，而动画（当我点击或用鼠标移动时，画布会重绘多次）看起来非常流畅。所以我比较他们的 CPU使用率。我希望当我使用WebGL时，CPU会少用，因为GPU可以保证很多绘图工作。但结果是，CPU使用率看起来几乎相同。我尝试优化我的WebGL代码，我认为这已经足够了。通过谷歌，我发现Chrome，Firefox等浏览器默认启用硬件加速。所以我尝试关闭硬件加速。然后第一种方法的CPU使用率变得更高。所以，我的问题是，由于画布2D使用GPU加速，我是否有必要将WebGL用于2D渲染？ canvas 2D GPU加速和WebGL有什么不同？他们都使用GPU。也许还有其他方法可以降低第二种方法的CPU使用率？任何答案都将不胜感激！
答案 0 :(得分：13)
Canvas 2D仍然支持比WebGL更多的地方，所以如果您不需要任何其他功能，那么使用Canvas 2D将意味着您的页面将适用于那些具有画布而不是WebGL（如旧的Android设备）的浏览器。当然，在这些设备上它会很慢，如果你有很多图像，可能会因为内存不足等原因而失败。
理论上，WebGL可以更快，因为canvas 2d的默认值是保留了drawingbuffer，而对于WebGL则没有。这意味着如果你在WebGL上关闭反锯齿，浏览器可以选择双缓冲。 canvas2d无法做到的事情。另一个优化是在WebGL中你可以关闭alpha，这意味着浏览器可以选择在将WebGL与页面合成时关闭混合，这也是它没有选择使用canvas 2d的选项。 （有计划能够关闭画布2d的alpha，但截至2017年6月它没有被广泛支持）
但是，通过选项我的意思就是这样。由浏览器决定是否进行这些优化。
否则如果您不选择那些优化，那么2可能是相同的速度。我个人没有发现这种情况。我试图用canvas 2d做一些只有drawImage的事情并没有得到像WebGL那样平滑的帧率。它没有任何意义，但我认为浏览器内部有一些我不知道的事情。
我想这会带来最后的差异。 WebGL是低级别的并且是众所周知的。浏览器无法搞清楚它。换句话说，你可以100％控制自己。
另一方面，Canvas2D取决于浏览器要做什么以及要进行哪些优化。它们可能在每个版本上都有所变我知道Chrome在某一点上256x256下的任何画布都不是硬件加速的。另一个例子是画布在绘制图像时的作用。在WebGL中，您可以制作纹理。您可以决定着色器的复杂程度。在Canvas中你不知道它在做什么。也许它使用了一个复杂的着色器，它支持所有各种画布globalCompositeOperation，遮罩和其他功能。也许对于内存管理，它会将图像分成夹头并将它们分成几部分。对于每个浏览器以及同一浏览器的每个版本，它决定要做的就是该团队，与WebGL一样，它几乎100％由您自己决定。他们在中间做的事情并不多，搞乱了WebGL。
仅供参考：这是an article detailing how to write a WebGL version of the canvas2d drawImage function，然后是an article on how to implement the canvas2d matrix stack。