如何使画布元素的窗口大小准确？

我想创建画布元素以获取窗口的所有空间，无需滚动。我做了如下：如何使画布元素的窗口大小准确？

重置边距和补窗口
采取大小
清除体内的所有儿童
创建画布，设置画布大小窗口大小
添加画布体

它的工作原理，但我在页面的底部得到一些额外的像素，浏览器滚动到上下显示这些像素。我在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

如何使画布元素的窗口大小准确？

回答

相关问题