提问人：Annon 提问时间：11/16/2023 最后编辑：NimanthaAnnon 更新时间：11/18/2023 访问量：29
我在使用 HTML5 和 JS 使画布占据整个窗口时遇到问题
I have trouble making a canvas take up the full window using HTML5 and JS
问：
我正在尝试编写一个基本游戏。但是，我一直遇到滚动条出现的问题，这意味着某些东西比它应该的要大。我看了一下，似乎是html标签对于窗口来说太高了。我需要知道如何解决这个问题。
这是我用来使它占据整个窗口的代码（这些是前 3 行代码）：
let canvas = document.getElementById("mainCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
答：
0赞
Aditya Paluskar
11/16/2023
#1
如果您希望画布占用整个空间，只需将其添加到画布属性中即可。
let canvas = document.getElementById("mainCanvas");
canvas.width = "100vw";
canvas.height = "100vh";
或
let canvas = document.getElementById("mainCanvas");
canvas.width = "100vw";
canvas.height = "100%";
vh 代表视口高度和 VW 表示视口宽度。
它的作用基本上是在浏览器中占据视口的高度和宽度。
评论
0赞
Annon
11/16/2023
好吧，我很确定问题出在 HTML 标签上，但有人只是告诉我如何以不同的方式解决问题。谢谢。
0赞
Aditya Paluskar
11/16/2023
随时欢迎;)
-1赞
Annon
11/16/2023
#2
我刚刚发现我可以放入CSS来解决我的问题。overflow: hidden;
评论
0赞
Neil W
11/16/2023
在不了解您首先遇到问题的原因的情况下使用这种方法可能会积累麻烦。在稍后的某个阶段，您可能会在“mainCanvas”上绘制某些内容，并发现其中的一部分从屏幕底部被截断。
0赞
Neil W
11/16/2023
使用浏览器开发人员工具选项（在Chrome上为Ctrl-Shift-I组合键），选择“元素”，然后单击右上角的元素选择器。然后，您可以将鼠标悬停在页面上的元素上以查找有问题的元素和样式/css。
0赞
Neil W
11/16/2023
#3
- 确保您的 html 和 body 没有添加任何边距或填充：
CSS的
html, body {
margin: 0;
padding: 0;
}
- 使用 css 将 mainCanvas 元素设置为视口范围，并在 Aditya 的回答中建议：
CSS的
#mainCanvas {
height: 100vh;
width: 100vw;
}
评论