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

【问题标题】：How to enable accelerated hardware in JavaScript for Canvas如何在 JavaScript 中为 Canvas 启用加速硬件
【发布时间】：2014-03-25 13:10:16
【问题描述】：

如何在 JavaScript 中为 HTML5 画布启用硬件加速？或者在 JavaScript 中是不可能的？我记得我在某处读到过有关使用 CSS 或 Webgl 进行此操作的文章，但我不记得了。

【问题讨论】：

【解决方案1】：

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

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

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

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

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

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

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

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

如果您打算在 HTML 中释放 GPU 硬件加速的全部功能，您应该选择WEBGL。 THREE.JS.

【讨论】：

【解决方案2】：

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

您可能记得的是触发加速显示的 CSS“技巧”，即使您自己并没有真正做 3d：

一种常见的方法是使用：

transform: translateZ(0);

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

请注意，这绝不是官方支持的硬件加速切换方式，它只是某些浏览器中的（未记录的？）副作用。

【讨论】：

【解决方案3】：

这不一定是一个坏问题，但您确实需要进行更多研究。它在几乎所有现代浏览器中都原生提供（不了解 IE）。所以基本上，你不能真正打开或关闭它，它就在那里，关闭它的唯一方法是通过客户端，而不是服务器。

【讨论】：