如何使畫布元素的窗口大小準確？

我想創建畫布元素以獲取窗口的所有空間，無需滾動。我做了如下：如何使畫布元素的窗口大小準確？

重置邊距和補窗口
採取大小
清除體內的所有兒童
創建畫布，設置畫布大小窗口大小
添加畫布體

它的工作原理，但我在頁面的底部得到一些額外的像素，瀏覽器滾動到上下顯示這些像素。我在iPad和Android（Galaxy Nexus）上測試了它 - 效果相同，所以它不像是一個包，但是具有誤解功能。

你有什麼想法這些像素是什麼以及如何去除它們？

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>My Page</title> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" /> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     initApp(); 
    }); 

    function initApp() { 
     windowWidth = $(window).width(); 
     windowHeight = $(window).height(); 

     canvas = document.createElement('canvas'); 
     canvas.width = windowWidth; 
     canvas.height = windowHeight; 
     context = canvas.getContext("2d"); 

     var body = document.getElementById("bo"); 
     while (body.firstChild) { 
     body.removeChild(body.firstChild); 
     } 
     body.appendChild(canvas); 

     // write something for test 
     context.fillStyle = "#00ff00"; 
     context.fillRect(0, 0, windowWidth, windowHeight); 
     context.fillStyle = "#ff0000"; 
     context.fillRect(0, 0, 200, 200); 
     context.fillStyle = "#000000"; 
     context.font = '20px _sans'; 
     context.textBaseline = 'top'; 
     context.fillText ("Canvas " + windowWidth + "x" + windowHeight + "!", 0, 0); 
    } 

    </script> 
</head> 
<body id="bo"> 
</body> 
</html>

來源

2012-12-10 tse

如果你只是希望擺脫滾動條的，你不擔心丟失這些額外的像素夫婦，只需添加CSS樣式overflow: hidden body元素。另請嘗試將display: block添加到畫布元素。

來源

2012-12-10 07:35:59

如何使畫布元素的窗口大小準確？

回答

相關問題