HTML5画布 - 浏览器窗口的完整范围

Question

让HTML5画布转到浏览器的完整范围的最佳方法是什么？

1. 绝对位置，顶部，左侧，右侧和底部设置为零？
2. 或者让javascript读取文档的宽度和高度，并将画布设置为那些尺寸？

Answer 1

当您使用CSS控制画布的大小时，画布输出将被缩放。这使得编程更容易，因为画布保留了其内部分辨率，但结果是图形输出变得模糊。

当您向window.onresize添加事件监听器并在窗口调整大小时调整canvas.width和canvas.height时，您不会遇到图形模糊的问题，但现在您的应用程序将具有处理画布分辨率可变的额外复杂性，并且可以随时更改。

要解决后一个问题，可以在resize事件处理程序中使用context.scale将画布的坐标系调整为新的窗口大小。这将允许其余代码使用恒定坐标系。请记住，所有转换函数都是累积的，因此多次调用可能会产生意外结果。但您可以通过调用context.setTransform(1, 0, 0, 1, 0, 0)将所有转换重置为默认值。