使用画布时，窗口似乎总是溢出[关闭]答案

【问题标题】：When working with canvas the window always seems to overflow [closed]使用画布时，窗口似乎总是溢出[关闭]
【发布时间】：2017-10-28 19:24:19
【问题描述】：

正如标题所说，我正在尝试使用画布，但每当我尝试将其高度和宽度设置为页面的 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。

【问题讨论】：

请附上您的代码示例。
您是否将body 的margin 设置为0？
欢迎来到 SO 哥们。为了获得更好的答案，它有助于生成一个最小、完整和可验证的示例（请参阅stackoverflow.com/help/mcve）
可能有多种原因。请将您的代码与问题一起发布，以帮助我们了解您的情况。
Get rid of padding/margin around <canvas> element?的可能重复

标签： javascript html css canvas

【解决方案1】：

添加显示：块；到你的画布上，它会起作用。我添加了背景仅供参考。

    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>

希望对您有所帮助。

【讨论】：

感谢老兄终于开始工作了。现在我可以继续研究画布了
很高兴它有帮助。接受它作为其他人获得帮助的答案。

【解决方案2】：

最简单的做法是始终将画布保留在自己的 div 中。

这个 div 中唯一存在的就是画布。

然后你可以使用 CSS 来调整你想要的 div 的大小。你想要它和身体一样大吗？给 div 宽度：100%。

那么你总是可以正确地做：

 canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

【讨论】：

刚刚试了一下，但由于某种原因，高度仍然溢出了一点点
尝试使用 CSS 规则固定在画布元素的位置：位置：固定；左：0；顶部：0；宽度：100%；高度：100%；
设法通过将 css 行混搭几天来使其工作。但 tbh 通常它工作得很好，但这次它只是没有听它的窗口大小。