使用html5 Canvas2D绘制响应式图像网格

Question

我正在尝试使用Canvas2D计划绘制3 x 3网格图像的方法，以便画布占据浏览器窗口的整个宽度和高度（因此每个图像的宽度和高度都是1/3） ）。

这个步骤非常简单，但是如何在调整浏览器窗口大小时正确调整所有图像的大小？

Answer 1

这个问题的第一部分应该在this SO thread内回答。

然后有办法获得浏览器窗口的实际宽度和高度。相关属性为window.innerWidth和window.innerHeight。触发resize事件时，您将需要运行一个函数来查找这些属性的值并将它们除以3以获得网格尺寸。请注意，调整画布大小将清除存储在其上的所有位图数据。