Question

当我创建一个画布，例如：

<!DOCTYPE html>
<html>

<body>
<canvas style="background-color: #FF0000; width: 100%; height: 100%></canvas>
</body>

</html>

我发现如果我让窗户足够小，宽度会缩放而不是高度。也就是说，画布按比例调整大小但仅足以使宽度完全适合 - 高度可能需要滚动。

我希望将整个画布按比例调整大小以使其适合页面上的所有内容（水平和垂直）。此外，我想以这样的方式这样做，即画布的宽度和高度属性不会改变（尽管如果clientWidth / clientHeight是可以的话）。

Answer 1

全屏画布

画布显示尺寸

画布是一个关于尺寸的特殊情况。它的分辨率定义了它包含的像素数，它的显示大小定义了它在页面上占用的像素数。

通过其样式属性设置画布显示大小。

canvas.style.width = "100%";  // does not change the resolution
canvas.style.height = "100%";

画布分辨率

要设置分辨率，请设置画布宽度和高度属性。

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.)

注意画布大小调整样式属性需要单位类型＆＃39;％＆＃39;，＆＃39; px＆＃39;，...而画布尺寸属性不会并且将采用如果您只是将它们设置为数字，则值为像素（＆＃39; px＆＃34;）。

由于尺寸不佳而导致质量不佳。

如果您只设置样式width和height，则最终会延长300 x 150像素的默认画布分辨率，并且由于采用双线性过滤，生成的图像会模糊不清。

默认画布分辨率的示例，仅限样式。

＆＃13;

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);

＆＃13;

    html, body {
        min-height: 100%;
    }
    canvas {
        width : 100%;
        height : 100%;
        background:#aaa;
    }

＆＃13;

    <canvas id="myCan"></canvas>

＆＃13;

全屏（页面）画布

要在显示尺寸和分辨率上正确调整画布大小（两者都应匹配最佳结果（不拉伸），最好通过javascript完成。

如果我正在制作全屏画布，我更喜欢通过绝对定位来定位它。

canvas.style.position = "absolute"
canvas.style.top = "0px";
canvas.style.left = "0px";

我没有通过设置样式宽度广告高度来设置画布显示大小，我允许浏览器在设置画布分辨率后为我计算

示例使用javascript正确设置全屏画布。

＆＃13;

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);

＆＃13;

    html, body {
        min-height: 100%;
    }
    canvas {
        background:#aaa;
    }

＆＃13;

    <canvas id="myCan"></canvas>

＆＃13;

注意您需要在页面调整大小时通过侦听窗口调整大小来调整画布大小。上面的例子将为您做到这一点。

Answer 2

默认情况下，身体没有身高。你可以做到。

html, body {
    min-height: 100%;
}

这将使身体达到一个高度，以便画布可以增大那个尺寸

Answer 3

您可以为自己的风格添加position:fixed;和left:0; top:0;。这将使您的画布全屏显示。

<!DOCTYPE html>
<html>
<body>
<canvas></canvas>
<style>
canvas{
    background-color: #FF0000; 
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
}    
</style>
</body>
</html>

画布调整宽度但不调整高度

3 个答案:

全屏画布