如何在Canvas中啟用JavaScript中的加速硬件

Question

如何在JavaScript中為HTML5畫布啟用硬件加速？ 還是在JavaScript中不可能？ 我記得我讀過一些有關使用CSS或Webgl進行此操作的信息，但我不記得了。

Answer 1

只要此問題與Canvas的javascript有關，標記為正確的答案是不正確的。

這僅適用於常規DOM對象，不適用於畫布中的元素：

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

如果您的瀏覽器支持並且您的計算機具有GPU，則可以使用Canvas硬件加速。

在某些較舊的瀏覽器中，必須由用戶在其瀏覽器設置中將其激活。

Google Chrome瀏覽器會在可用時激活它。 您可以通過訪問以下Chrome瀏覽器 URL檢查您的Chrome瀏覽器是否正在運行HTML Canvas硬件加速： Google Chrome GPU頁面

Chrome中的Canvas硬件加速功能於2012年推出。

您可以在此處查看文章中提供的示例。

如果您打算在HTML中釋放GPU硬件加速的全部功能，則應該使用WEBGL 。 THREE.JS是一種入門WEBGL的簡便好方法。

Answer 2

這不一定是一個壞問題，但是您必須進行更多研究。 它幾乎在所有現代瀏覽器中都提供（不了解IE）。 因此，基本上，您真的不能打開或關閉它，它只是在那兒，唯一的關閉方法是通過客戶端而不是服務器。

Answer 3

更新：如其他答案中所述，這不是正確的答案，因為CSS技巧不會影響3D畫布。

您可能還記得，即使您自己並沒有真正進行3d操作，也可以觸發加速顯示的CSS“技巧”：

一種常見的方法是使用：

transform: translateZ(0);

在你的CSS。 （如果需要，添加瀏覽器前綴的版本）

請注意，這絕不是官方支持的啟用硬件加速的方法，它只是某些瀏覽器中的（未記錄？）副作用。