Question

我想创建canvas元素来占用窗口的所有空间，而不需要滚动。我这样做：

重置边距和填充
取窗口大小
移除所有身体的孩子
创建画布，将画布大小设置为窗口大小
将画布添加到正文

它有效，但我在页面底部采用了一些额外的像素，浏览器向上和向下滚动以显示这些像素。我在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>

Answer 1

如果您只是想摆脱滚动条并且不担心错过那些额外的几个像素，只需将CSS样式overflow: hidden添加到body元素即可。还可以尝试将display: block添加到canvas元素。

如何使canvas元素具有精确的窗口大小？

1 个答案: