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

Question

让 HTML5 画布完全覆盖浏览器的最佳方式是什么？

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

Answer 1

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

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

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