html - 如何理解硬件加速画布

Question

我读过一篇文章，有一种叫做硬件加速画布的东西
代码片段是

// 设置硬件缩放
画布.宽度 = 300;
canvas.style.width = window.innerWidth + 'px';
画布.高度 = 200;
canvas.style.height = window.innerHeight + 'px';

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

Answer 1

是的，它的分辨率会更低，但帖子还说：

...我们可以在较小的分辨率上工作，让 GPU 重新调整结果以适应 DOM 对象（使用漂亮且免费的过滤器来模糊结果）。

从理论上讲，这种技术应该可以在不牺牲太多质量的情况下提高性能。您可能想玩canvas.width并canvas.height获得最佳性能/质量比。

Answer 2

显然，是的，它会的。

这就像以较低的分辨率（如 640x480）全屏运行游戏。

还有一篇文章涵盖了这一点。

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