想要改进这个问题？通过编辑这篇文章添加细节并澄清问题。
正如标题所说，我试图使用画布，但每当我试图将其高度和宽度设置为页面的100%高度和宽度时，它就会溢出一点点。我不知道为什么会发生这种情况，当我试图做某事时，它非常烦人。
有人知道为什么会这样吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Practice</title>
<style type="text/css">
canvas{
height: 100%;
width: 100%;
}
html,body
{
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script type="text/javascript" src="canvas.js"></script>
</body>
</html>
这是我的带有一些基本内联css的html。
添加显示：块；到您的画布，它将工作。我添加了背景仅供参考。
canvas{
height: 100%;
width: 100%;
display: block;
background: #222;
}
html,body
{
margin: 0;
height: 100%;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Practice</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript" src="canvas.js"></script>
</body>
</html>
最简单的做法是始终将画布保存在自己的div中。
这个div中唯一的东西就是画布。
然后你可以使用CSS来调整div的大小。你想让它和主体一样大吗？给div宽度： 100%。
那么你总是可以理直气壮地做：
canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;
