当我创建 Canvas 时，例如:
<!DOCTYPE html>
<html>
<body>
<canvas style="background-color: #FF0000; width: 100%; height: 100%></canvas>
</body>
</html>
我发现如果我让窗口足够小，宽度将会缩放，但高度不会缩放。也就是说， Canvas 按比例调整大小，但仅足以使宽度完全适合——高度可能需要滚动。
我希望按比例调整整个 Canvas 的大小，以便它适合页面上的所有内容(水平和垂直)。此外，我想以一种不改变 Canvas 的宽度和高度属性的方式来执行此操作(尽管如果 clientWidth/clientHeight 是可以的)。
最佳答案
全屏 Canvas
Canvas 显示尺寸
Canvas 是尺寸调整的一个特例。它的分辨率定义了它包含的像素数量，它的显示尺寸定义了它在页面上占据的像素数量。
Canvas 显示尺寸通过其样式属性设置。
canvas.style.width = "100%"; // does not change the resolution
canvas.style.height = "100%";
Canvas 分辨率
要设置分辨率，请设置 Canvas 宽度和高度属性。
canvas.width = 1000; // if the style width and height not set then
canvas height = 800; // the computed style will match. If not
// then setting the resolution will
// not effect display size (in most cases.)
Note that canvas sizing style properties required unit type '%', 'px', ... while canvas size properties do not and will assume the values are pixels ('px") if you just set them as a number.
由于尺寸不当导致质量低下。
如果您仅设置样式宽度和高度，您最终会拉伸(stretch)默认的 Canvas 分辨率(300 x 150 像素)，并且由于双线性过滤，生成的图像会变得模糊.
默认 Canvas 分辨率和仅样式大小调整的示例。
var ctx = myCan.getContext("2d");
ctx.font = "18px arial";
ctx.textAlign = "center";
ctx.fillText("Low res & blury",myCan.width/2,myCan.height/2);
ctx.font = "12px arial";
ctx.fillText("Canvas resolution default " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18); html, body {
min-height: 100%;
}
canvas {
width : 100%;
height : 100%;
background:#aaa;
}
<canvas id="myCan"></canvas>全屏(页面) Canvas
要正确调整 Canvas 的显示大小和分辨率(两者都应匹配最佳结果(不拉伸(stretch)))，最好通过 JavaScript 完成。
如果我正在制作全屏 Canvas ，我更喜欢通过绝对定位来定位它。
canvas.style.position = "absolute"
canvas.style.top = "0px";
canvas.style.left = "0px";
我不会通过设置样式宽度和高度来设置 Canvas 显示大小，一旦我设置了 Canvas 分辨率，我就允许浏览器为我计算该尺寸
示例使用 JavaScript 正确设置全屏 Canvas 。
myCan.style.position = "absolute"
myCan.style.top = "0px";
myCan.style.left = "0px";
// when page has loaded size the canvas resolution to fit the display
myCan.width = window.innerWidth;
myCan.height = window.innerHeight;
var ctx = myCan.getContext("2d");
ctx.font = "18px arial";
ctx.textAlign = "center";
ctx.fillText("Canvas resolution matches page resolution",myCan.width/2,myCan.height/2);
ctx.font = "12px arial";
ctx.fillText("Canvas resolution " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18);
ctx.textAlign = "right";
ctx.fillText("Resize by clicking [full page]",myCan.width -10,20);
// resize function
function resizeCan(){
myCan.width = window.innerWidth;
myCan.height = window.innerHeight;
ctx.font = "18px arial";
ctx.textAlign = "center";
ctx.fillText("Resized canvas resolution matches page resolution",myCan.width/2,myCan.height/2);
ctx.font = "12px arial";
ctx.fillText("Canvas resolution " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18);
}
window.addEventListener("resize",resizeCan); html, body {
min-height: 100%;
}
canvas {
background:#aaa;
} <canvas id="myCan"></canvas>Note that you need to resize the canvas when the page resizes by listening to the window resize. The above example will do that for you.
关于javascript - Canvas 按宽度调整大小，但不按高度调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39318755/