如何理解硬件加速画布

Question

我读过a post，并且有一些东西叫硬件加速画布 代码段是

// Setting hardware scaling
canvas.width = 300;
canvas.style.width = window.innerWidth + 'px';
canvas.height = 200;
canvas.style.height = window.innerHeight + 'px';

我在这里不太了解，这有什么意义？ 它不会降低画布内容的质量，比如在其中显示更大的像素吗？ 感谢

Answer 1

是的，它的分辨率较低，但帖子也说：

  

...我们可以处理更小的分辨率，让GPU重新调整   结果以适合DOM对象（使用漂亮且免费的过滤器来模糊   结果）。

理论上，这种技术应该在不牺牲质量的情况下提高性能。您可能希望使用canvas.width和canvas.height来获得最佳性能/质量比率。

Answer 2

显然，是的。

就像用640x480这样的低分辨率运行游戏全屏。

还有另一个article覆盖了这个。

  

顺便说一下，这不是HTML5特有的。大多数现代主机游戏都不是内部计算的720p或1080p。几乎所有这些都以较低的分辨率（例如1024x600）渲染游戏，并让GPU进行缩放/抗锯齿处理。在大多数情况下，这可以帮助您提高FPS。