使用画布时，窗口似乎总是溢出

问题描述：

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

请附上您的代码示例。 – deathangel908

您是否将'body'的'margin'设置为'0'？ – Xufox

欢迎来到SO好友。为了获得更好的答案，它有助于生成一个最小化，完整和可验证的示例（请参阅https://stackoverflow.com/help/mcve） – user184994

答

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

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>

希望这有助于。

感谢男人终于开始工作。现在我可以继续实际学习画布 – AquaProgramming

很高兴帮助。接受它作为其他人获得帮助的答案。 –

答

最简单的事情就是始终将画布保留在自己的div中。

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

然后，您可以使用CSS调整div的大小，但不管您想要什么。你想要它像身体一样大吗？给予div宽度：100％。

那么你可以随时理所当然做到：

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

可能重复只是给了一个但由于某些原因，高度仍然会溢出很小数量 – AquaProgramming

尝试使用CSS规则固定位置与画布元素： position：fixed; left：0; top：0; 宽度：100％; 身高：100％; –

设法通过将css行混合到它上面来工作。但通常情况下它工作得很好，但这次它只是没有听它的窗口大小。 – AquaProgramming

使用画布时，窗口似乎总是溢出

相关推荐