使用畫布時，窗口似乎總是溢出

-1

正如標題所說，我試圖使用畫布，但每當我嘗試將其高度和寬度設置爲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。

來源

2017-10-28 AquaProgramming

請附上您的代碼示例。 – 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>

希望這有助於。

來源

2017-10-28 11:24:19

感謝男人終於開始工作。現在我可以繼續實際學習畫布 – AquaProgramming

很高興幫助。接受它作爲其他人獲得幫助的答案。 –

最簡單的事情就是始終將畫布保留在自己的div中。

唯一會在這個div中的是畫布。

然後，您可以使用CSS調整div的大小，但不管您想要什麼。你想要它像身體一樣大嗎？給予div寬度：100％。

那麼你可以隨時理所當然做到：

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

來源

2017-10-28 11:09:29

可能重複只是給了一個但由於某些原因，高度仍然會溢出很小數量 – AquaProgramming

嘗試使用CSS規則固定位置與畫布元素： position：fixed; left：0; top：0; 寬度：100％; 身高：100％; –

設法通過將css行混合到它上面來工作。但通常情況下它工作得很好，但這次它只是沒有聽它的窗口大小。 – AquaProgramming

使用畫布時，窗口似乎總是溢出

回答

相關問題