gpt4 book ai didi

html - 如何删除 html5 Canvas 的额外高度?

转载 作者:技术小花猫 更新时间:2023-10-29 12:39:10 25 4
gpt4 key购买 nike

我正在测试 html5 canvas 元素,并希望我的 Canvas 在显示区域中全屏显示。但是我发现如果我将 Canvas 高度设置为window.innerHeight,滚动条就会显示出来。我试过发现需要将高度设置为少 5 个像素,滚动条就会消失,但不幸的是它在 Canvas 下方留下了一个白色边框。如果它是一个 div 元素,一切都很好。

我用来测试的代码是:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function load() {
var o = document.getElementById('canvas');
if (o) {
o.width = window.innerWidth;
o.height = window.innerHeight - 5;
}
o = document.getElementById('div');
if (o) {
o.style.width = window.innerWidth + 'px';
o.style.height = window.innerHeight + 'px';
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: white;
}
#canvas {
background-color: blue;
}
#div {
background-color: green;
}
</style>
</head>
<body onload="load();">
<canvas id="canvas"></canvas>
<!--div id="div"></div-->
</body>
</html>

我已经清除了主体边距和填充。

我在 Chrome 8.0.552 上对其进行了测试,它在 Firefox 3.6.13 上的表现也一样,但少 4 个像素就可以了。

我错过了什么吗?任何建议将不胜感激。非常感谢。

最佳答案

默认情况下 canvasdiv 不同,它是 display: inline; 所以它被设置为 vertical-align: baseline; 。您可以采用以下任一方法使内容自然填充 window.innerHeight:

#canvas {
background-color: blue;
vertical-align: top;
}

或者:

#canvas {
background-color: blue;
display: block;
}

关于html - 如何删除 html5 Canvas 的额外高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4785360/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com