使用 100% 不会使我的画布填满窗口 [重复]答案

【问题标题】：Using 100% does not make my canvas fill the window [duplicate]使用 100% 不会使我的画布填满窗口 [重复]
【发布时间】：2015-08-07 00:34:02
【问题描述】：

我正在尝试让我的画布填满整个窗口。将宽度和高度设置为 100% 根本不起作用。相反，它是 100 x 100 像素。为什么会发生这种情况，我怎样才能达到我的效果？

这是一个基本上显示我的问题的小提琴。谢谢！

https://jsfiddle.net/t04n6q9y/1/

<body height="100%" width="100%">
    <canvas id="myCanvas" width="100%" height="100%"></canvas>
</body>

【问题讨论】：

请不要为此使用 CSS，当您尝试做的不仅仅是 ctx.fillRect(0,0,canvas.width,canvas.height) 时，您会遇到很多困难。例如，如果你想添加一些鼠标监听器，你的坐标会被搞砸，如果你尝试画一个圆圈，它可能会以一个椭圆结尾，如果你尝试drawImage()，比例会被搞砸，无论如何，你的像素比例会出错。
您的代码将画布大小设置为 100x100 像素，因为 canvas.width 和 canvas.height 都采用数字大小而不是百分比大小。 canvas.width=window.innerWidth; & canvas.height=window.innerHeight 会将您的画布调整为当前窗口大小。

标签： javascript html css canvas fullscreen

【解决方案1】：

宽度和高度是属性，不支持%，它们需要是绝对的。如果您在 CSS 中指定 100% 宽度和高度，您的画布将不会缩放到 100%，而是会缩放到 100%。我建议采用以下方法来实现 100% 的宽度和高度：

你需要在javascript中计算宽度然后应用它，Fiddle

js:

var height = window.innerHeight;
var width = window.innerWidth;

var canvas = document.getElementById('myCanvas');
canvas.height = height;

片段：

var height = window.innerHeight;
var width = window.innerWidth;

var canvas = document.getElementById('myCanvas');
canvas.height = height;
canvas.width = width;
var context = canvas.getContext('2d');
context.fillStyle = "#FFFF00";
context.fillRect(0, 0, canvas.width, canvas.height);

body {
  margin: 0px;
  padding: 0px;
  background-color: #00000F
}
canvas {
  padding: 0;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<body>
  <canvas id="myCanvas"></canvas>
</body>

【讨论】：

这是唯一考虑到 OP 可能会比画布上的 fillRect 更多的答案

【解决方案2】：

您应该使用 CSS 而不是 HTML 标签属性来执行此操作。通过声明一个 CSS 类，您将能够将相同的样式应用于您可能想要全屏显示的任何其他内容。它还将 DOM 逻辑与样式逻辑分开。

我会这样做：

HTML：

<canvas class="fullscreen"></canvas>

CSS：

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
}

“vw”和“vh”单位分别代表视图宽度和视图高度的百分比。使用这些单位将确保您的画布填满整个视口，而不管其父元素的大小。

【讨论】：

【解决方案3】：

所有需要做的就是让画布有一个可以展开的元素。

HTML：

<body>
    <div id="canback">
    <canvas id="myCanvas"></canvas>
    </div>
</body>

CSS：

body {
margin: 0px;
padding: 0px;
background-color: #00000F
}

#canback {
height: 100%;
width: 100%;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

#myCanvas {
background:#f4f4f4;
height:100%;
width: 100%;
padding: 0;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

这是Fiddle

我希望这会有所帮助。 :D

【讨论】：

是的，我刚刚注意到我把它放在那里了。