类似于
i want a
div to take 100% height,100％宽度或两者.我希望Canvas采用100％宽度和100％高度：
(Link to JsFiddle for your perusal)
标记：
<div id="canvasContainer">
<canvas id="myCanvas"></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 id="myCanvas"></canvas>
现在我们可以计算出尺寸：
var canvas;
window.onload = window.onresize = function() {
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
就是这样.
Working demo(调整窗口大小看).
