0

我想创建画布元素以占用窗口的所有空间，而无需滚动。我执行以下操作：

  1. 重置边距和填充
  2. 取窗口大小
  3. 删除 body 的所有子项
  4. 创建画布，将画布大小设置为窗口大小
  5. 将画布添加到正文

它可以工作，但我在页面底部多取了一些像素，浏览器上下滚动以显示这些像素。我在 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>
4

1 回答 1

1

如果您只是想摆脱滚动条并且您不担心丢失那些额外的几个像素，只需将 CSS 样式添加overflow: hidden到 body 元素。也尝试添加display: block到画布元素。

于 2012-12-10T07:35:59.787 回答