我怎样才能删除HTML5画布的额外高度？ [英] How can I remove the extra height of html5 canvas?
问题描述
我正在测试html5 canvas元素，并希望我的画布在显示区域全屏显示。但是我发现如果将画布高度设置为window.innerHeight，滚动条将显示出来。我试过并发现需要将高度设置为5像素以下，滚动条会消失，但不幸的是它在画布下留下了一个白色边框。如果它是一个div元素，一切都很好。
我用来测试的代码是：
<！DOCTYPE html>
< html>
< head>
< title>测试< /标题>
< script type =text / javascript>
函数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>
* {
保证金：0;
填充：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个像素。
我错过了什么？任何建议将非常感激。
默认 canvas ，与<$ c不同$ c> div ，是 display：inline; 因此它被设置为 vertical-align：baseline; 。你可以采取以下任何一种方法，使得事情自然地填充 window.innerHeight ：
#canvas {
background-color：blue;
vertical-align：top;
}
或者：
#canvas {
background-color：blue;
display：block;
}
I was testing html5 canvas element, and wish my canvas to be full screen in the display area. But I found if I set the canvas height to window.innerHeight, the scroll bar will be shown up. I tried and found need to set the height to 5 pixel less, the scroll bar will disappear, but unfortunately it left a white border below the canvas. If it's a div element, everything is fine.
The code I'm using to test is:
<!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>
I've cleared the body margin and padding.
I test it on Chrome 8.0.552, and also it acts same on Firefox 3.6.13 but 4 pixel less is fine.
Anything I missed? Any suggestions will be really appreciated. Thanks a lot.
By default canvas, unlike div, is display: inline; so it gets set to vertical-align: baseline;. You can take either of the following approaches to make things naturally fill the window.innerHeight:
#canvas {
background-color: blue;
vertical-align: top;
}
Or:
#canvas {
background-color: blue;
display: block;
}
这篇关于我怎样才能删除HTML5画布的额外高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
