Canvas 根据浏览器窗口大小调整视口/画布的大小

我希望我的webgl应用程序视口和画布能够对浏览器窗口大小的更改做出反应（包括F11按钮）。例如，我希望画布始终为100%宽度和高度，并且我希望视口大小和纵横比适当。我用简单的方法实现了前者：

<canvas style="width: 100%; height:100%;">

这是错误的，因为画布的大小不会经常改变（它总是100%的宽度和高度），但我不知道该怎么做

以下是该应用程序的在线版本：。

我认为这是可行的：

var画布；
var-gl；
函数render（）{
总图视口（0，0，总图画布宽度，总图画布高度）；
//使用在边缘周围绘制一个1像素的边框
//剪式测试，因为它比设置更容易
//很多东西
gl.clearColor（1,0,0,1）；//红色
gl.禁用（gl.剪刀试验）；
总账清除（总账颜色缓冲位）；
总帐启用（总帐剪刀测试）；
gl.剪刀（1，1，gl.canvas.width-2，gl.canvas.height-2）；
gl.clearColor（0,0,1,1）；//蓝色
总账清除（总账颜色缓冲位）；
};
函数resizeCanvas（）{
var width=canvas.clientWidth；
变量高度=canvas.clientHeight；
如果（canvas.width！=宽度||
canvas.height！=高度）{
画布宽度=宽度；
canvas.height=高度；
//在这种情况下，只需在调整窗口大小时渲染即可。
render（）；
}
}
函数main（）{
canvas=document.getElementById（“c”）；
gl=canvas.getContext（“webgl”）；
调整画布的大小（）；
}
addEventListener（'resize'，resizeCanvas）；
main（）
body{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}
嗯，差不多了。一切都很好，除了我在页面底部（画布下方）有3-4px的白色边距，而且（可能正因为如此）我在页面中有一个垂直滚动条（这是我不需要或不想要的）。在附带的JSFIDLE示例中也会发生同样的情况。在firefox和chrome中，额外的边距可能是由于文本下降器的高度-尝试设置画布的样式
display:block
@KevinReid，现在答案就完成了（尽管由两个不同的人完成）。无论如何，谢谢！：）顺便说一句，我在html标签上尝试了
overflow:hidden
，效果也不错-哪种方法更好，为什么？
overflow:hidden
阻止你滚动到额外的空间<代码>显示：块

导致它不存在。我更希望后者解决这个问题，因为它更符合目的；此外，内联布局有一些“奇怪之处”，这可能令人惊讶，所以最好使用块对块的方式。

canvas.onresize = resizeViewport;