12
私はhtml5キャンバス要素をテストしていましたが、私のキャンバスを表示領域の全画面にしたいと考えています。しかし、キャンバスの高さをwindow.innerHeightに設定すると、スクロールバーが表示されます。私は、5ピクセル以下の高さに設定する必要があると考えましたが、スクロールバーは消えますが、残念ながらキャンバスの下に白い枠線が残っていました。 div要素の場合はすべて問題ありません。html5キャンバスの余分な高さを削除するにはどうすればよいですか？
私がテストに使用しているコードは次のとおりです。
<!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ピクセル以下で問題ありません。
私が逃したものは何ですか？任意の提案は本当に感謝されます。どうもありがとう。