调整HTML5画布的大小以适合窗口

如果您的div完全填满了网页，那么您可以填充该div，因此可以使用画布来填充div。

您可能会发现这很有趣，因为您可能需要使用css来使用百分比，但是，这取决于您使用的浏览器，以及与规范相符的程度：http : //www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html＃the-canvas-element

canvas元素的固有尺寸等于坐标空间的大小，其数字以CSS像素表示。但是，可以通过样式表任意设置元素的大小。在渲染期间，将缩放图像以适合此布局大小。

您可能需要获取div的offsetWidth和height，或者获取窗口的高度/宽度并将其设置为像素值。

根据浏览器客户端的尺寸设置画布坐标空间的宽度和高度需要您在每次调整浏览器大小时进行调整并重新绘制。

较不复杂的解决方案是在Javascript变量中保留可绘制的尺寸，但根据screen.width，screen.height尺寸设置画布尺寸。使用CSS来适合：

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
} 

浏览器窗口通常不会比屏幕本身大（除非错误地报告了屏幕分辨率，因为不匹配的双显示器可能会出现错误），因此背景将不会显示，像素比例也不会改变。除非使用CSS缩放画布，否则画布像素将与屏幕分辨率成正比。

除非您希望画布自动放大图像数据（这就是James Black的答案，但是看起来并不漂亮），否则您必须自己调整大小并重新绘制图像。使画布居中