我有这段代码：<!DOCTYPE html><html> <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>为什么它会生成比浏览器视口更大的画布，并制作滚动条？除此之外，它在画布下方留出了一些空白。为什么以及如何解决？谢谢！
1 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
默认情况下，画布显示设置为display: inline;
您只需将画布显示设置为display: block;
<!DOCTYPE html>
<html>
<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>
添加回答
举报
0/150
提交
取消