如何自动缩放HTML5 <canvas>元素以适合页面？
例如，我可以<div>通过将height和width属性设置为100％来缩放，但是<canvas>不会缩放吗？
调整HTML5画布的大小以适合窗口
第2727篇《调整HTML5画布的大小以适合窗口》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共3个回答
根据浏览器客户端的尺寸设置画布坐标空间的宽度和高度需要您在每次调整浏览器大小时进行调整并重新绘制。
较不复杂的解决方案是在Javascript变量中保留可绘制的尺寸，但根据screen.width，screen.height尺寸设置画布尺寸。使用CSS来适合：
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
浏览器窗口通常不会比屏幕本身大（除非错误地报告了屏幕分辨率，因为不匹配的双显示器可能会出现错误），因此背景将不会显示，像素比例也不会改变。除非使用CSS缩放画布，否则画布像素将与屏幕分辨率成正比。
除非您希望画布自动放大图像数据（这就是James Black的答案，但是看起来并不漂亮），否则您必须自己调整大小并重新绘制图像。使画布居中
相似问题
问题类别
如果您的div完全填满了网页，那么您可以填充该div，因此可以使用画布来填充div。
您可能会发现这很有趣，因为您可能需要使用css来使用百分比，但是，这取决于您使用的浏览器，以及与规范相符的程度：http : //www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html＃the-canvas-element
您可能需要获取div的offsetWidth和height，或者获取窗口的高度/宽度并将其设置为像素值。