小编tie*_*eng的帖子

如何删除html5画布的额外高度?

我正在测试html5 canvas元素,并希望我的画布在显示区域全屏显示.但我发现如果我将画布高度设置为window.innerHeight,滚动条将会显示出来.我试过,发现需要将高度设置为5像素,滚动条将消失,但不幸的是它在画布下方留下了白色边框.如果它是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--> …
Run Code Online (Sandbox Code Playgroud)

html5 canvas

12
推荐指数
1
解决办法
3987
查看次数

标签 统计

canvas ×1

html5 ×1