css – 如何让Canvas占用100％的剩余空间？

类似于 i want a div to take 100% height,100％宽度或两者.我希望Canvas采用100％宽度和100％高度：

(Link to JsFiddle for your perusal)

标记：

<div >
    <canvas ></canvas>
</div>

CSS：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
#canvasContainer {
    width: 100%;
    height: 100%;
    background-color: green;
}
#myCanvas {
    width: 100%;
    height: 100%;
}

使用Javascript：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();

这导致一些事情没有占据浏览器窗口的100％：

如果删除Canvas,它可以正常工作：

那个缺点就是我没有Canvas.

调整画布元素的大小

如果你使用CSS拉伸画布,你将拉伸整个屏幕的默认大小为300×150像素的可怜画布 – 想象你有一个大小的图像和你做的相同 – 将看起来非常糟糕.

无法使用CSS拉伸画布内容(它充当图像的方式).您需要显式设置画布的像素大小.

这意味着您需要获取父容器的大小并将其设置为画布上的像素值：

首先,摆脱滚动条等,调整你的CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    overflow:hidden;
}

现在修改此规则：

#myCanvas {
    background-color: green;
    position:fixed;
    left:0;
    top:0;
}

现在只将标记减少到此(如果您希望画布覆盖整个场景,则不需要窗口以外的容器)：

<canvas ></canvas>

现在我们可以计算出尺寸：

var canvas;

window.onload = window.onresize = function() {

    canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;   
}

就是这样.

Working demo(调整窗口大小看).