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

Question

我在这里托管了我的网站的静态测试版本：

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似乎在它上面禁止。

Answer 1

页面看起来很棒。但是我不认为你在Chrome上也是正确的，因为调整大小后背景不会被重新绘制。

您应该将事件侦听器附加到onResize事件，并从该处理程序调用{​​{1}}以使用新的画布大小重新绘制所有内容。

关于尺寸问题，您应该使用canvasMain()和window.innerWidth。因为window.innerHeight打包到只有320像素高度的内容，所以它不会填满整个页面。