如何在 Firefox 中将画布扩展到整个视口？答案

【问题标题】：How can I expand a canvas to the entire viewport in Firefox?如何在 Firefox 中将画布扩展到整个视口？
【发布时间】：2012-08-15 05:04:25
【问题描述】：

我在此处托管了我的网站的静态测试版本：

http://alexgolec.staticloud.com/

但是当我在 Firefox 中启动它时，画布没有正确调整大小。我认为有问题的代码行在这里：

    var _docHeight = (document.height !== undefined) ? document.height : 
                      document.body.offsetHeight;
    var _docWidth = (document.width !== undefined) ? document.width : 
                     document.body.offsetWidth;

    ctx.canvas.width = _docWidth;
    ctx.canvas.height = _docHeight;

这段代码在 WebKit 浏览器中可以正常工作，但 Gecko 似乎对此感到厌烦。

【问题讨论】：

标签： javascript firefox canvas

【解决方案1】：

页面看起来很棒。但我不认为你在 Chrome 上也能做到这一点，因为调整大小后不会重新绘制背景。

您应该将事件侦听器附加到 onResize 事件，并从该处理程序中调用 canvasMain() 以使用新的画布大小重新绘制每个事物。

关于尺寸问题，你应该使用window.innerWidth和window.innerHeight。因为<body>被打包到只有320px高度的内容，所以不会填满整个页面。

【讨论】：