我有一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red;"></canvas>
</body>
</html>
为什么它生成的画布比浏览器视口大，并制作滚动条？除此之外，它在画布下面留出了一些空白。为什么以及如何解决？谢谢
默认情况下，画布显示设置为display: inline;
您只需将画布显示设置成display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red; display: block;"></canvas>
</body>
</html>