12
Tôi đã thử nghiệm phần tử canvas html5 và muốn canvas của tôi hiển thị toàn màn hình trong khu vực hiển thị. Nhưng tôi thấy nếu tôi đặt chiều cao canvas thành window.innerHeight, thanh cuộn sẽ được hiển thị. Tôi đã cố gắng và tìm thấy cần phải thiết lập chiều cao đến 5 pixel ít hơn, thanh cuộn sẽ biến mất, nhưng tiếc là nó để lại một đường viền màu trắng bên dưới khung vẽ. Nếu đó là một yếu tố div, mọi thứ đều ổn.Làm cách nào để xóa chiều cao thêm của canvas html5?
Mã Tôi đang sử dụng để kiểm tra là:
<!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>
Tôi đã xóa lề cơ thể và padding.
Tôi thử nghiệm trên Chrome 8.0.552 và cũng hoạt động tương tự trên Firefox 3.6.13 nhưng 4 pixel ít hơn.
Mọi thứ tôi đã bỏ lỡ? Bất kỳ đề xuất nào cũng sẽ được đánh giá cao. Cảm ơn rất nhiều.