如何在Canvas中为JavaScript启用加速硬件

Question

如何在JavaScript中为HTML5画布启用硬件加速？或者在JavaScript中不可能？我记得我在某处读过使用CSS或Webgl的东西，但我记不起来了。

Answer 1

标记正确的答案是不正确的，只要这个问题是关于Canvas的javascript。

这仅适用于常规DOM对象，而不适用于画布中的元素：

transform: translateZ(0); // doesn't apply in Canvas

如果您的浏览器支持Canvas硬件加速并且您的计算机具有GPU，则可以使用Canvas硬件加速。

在某些较旧的浏览器中，用户必须在浏览器设置中激活它。

Google Chrome会在可用时激活它。您可以访问以下Chrome网址，检查您的Chrome是否正在运行HTML Canvas硬件加速：Google Chrome GPU Page

Chrome中的Canvas硬件加速已在2012.

中引入

您可以看到文章here中提供的示例。

如果您的目的是释放HTML中GPU硬件加速的全部功能，那么您应该使用WEBGL。开始使用WEBGL的好方法是THREE.JS。

Answer 2

这不一定是个坏问题，但你必须多研究一下。它几乎在每个现代浏览器中都是本地提供的（不了解IE）。 所以基本上，你不能真正打开或关闭它，它只是在那里，而关闭它的唯一方法是通过客户端，而不是服务器。

http://www.htmlgoodies.com/html5/client/unleash-the-power-of-hardware-accelerated-html5-canvas.html#fbid=F8_jSGY0u2D

Answer 3

更新：正如其他答案所述，这不是正确答案，因为css技巧不会影响3d画布。

你可能记得的是，即使你自己并不真正做3D，CSS触发加速显示的'技巧'：

一种常见的方法是使用：

transform: translateZ(0);

在你的CSS中。 （如果需要，添加带浏览器前缀的版本）

请注意，这绝不是官方支持的硬件加速方式，在某些浏览器中只是一种（无证件的）副作用。