向下滚动时为什么画布下面有空白 [英] why is there white space under the canvas when I scroll down
问题描述
我将画布的高度设置为窗口的内部宽度.每当我向下滚动时，画布就会向上移动一点，露出白色的空间.如何使您无法向下滚动.
I have set my canvas's height to the window's inner width. Whenever I scroll down, the canvas shifts up a bit revealing a white space. How can I make it that you are unable to scroll down.
//declare variables
var body = document.getElementById("body");
var canvas = document.getElementById("canvas");
var iwidth = window.innerWidth;
var iheight = window.innerHeight;
//puts canvas in top right corner
body.style.margin = "0";
//changes the canvas's style namely color, margin, width and height
canvas.style.backgroundColor = "red";
canvas.style.margin = "0";
canvas.width = iwidth;
canvas.height = iheight;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DUNGE</title>
</head>
<body id="body">
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>推荐答案
There is white space under your canvas, because the HTML <canvas> element has a default style of display: inline;. Inline elements are designed to contain text, and therefore white space gets added underneath the element for descenders (the bits that hang off the bottom of 'y' and 'p').
要解决此问题，请对元素应用 display:block; .
To fix the problem, apply display: block; to the element instead.
使用Javascript，您可以这样做:
Using Javascript, you would do that like this:
canvas.style.display = "block";
//declare variables
var body = document.getElementById("body");
var canvas = document.getElementById("canvas");
var iwidth = window.innerWidth;
var iheight = window.innerHeight;
//puts canvas in top right corner
body.style.margin = "0";
//changes the canvas's style namely color, margin, width and height
canvas.style.backgroundColor = "red";
canvas.style.margin = "0";
canvas.style.display = "block";
canvas.width = iwidth;
canvas.height = iheight;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DUNGE</title>
</head>
<body id="body">
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>您还可以通过在画布上应用 font-size:0; 来解决此问题，但是 display:block 更好，因为它可以根据您的需要做您的画布来做.
You can also fix the problem by applying font-size: 0; to the canvas, but display: block is better because it is made to do what you want your canvas to do.
另请参见 https://stackoverflow.com/a/5078297/7733026
这篇关于向下滚动时为什么画布下面有空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
