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(调整窗口大小看).