Javascript 调整画布大小时，为什么会出现滚动条？_Javascript_Canvas_Document Body

Javascript 调整画布大小时，为什么会出现滚动条？

javascript canvas

Javascript 调整画布大小时，为什么会出现滚动条？,javascript,canvas,document-body,Javascript,Canvas,Document Body,我做了一个页面，画布应该填满窗口。它可以工作，但由于某些原因，滚动条会出现。我不知道，是什么错误 <!doctype html> <html> <head> <title>test</title> <meta charset="utf-8" /> <style type="text/css"> #canvas { background-color: #EE

我做了一个页面，画布应该填满窗口。它可以工作，但由于某些原因，滚动条会出现。我不知道，是什么错误

<!doctype html>
<html>

  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style type="text/css">
      #canvas {
        background-color: #EEEEEE;
      }
      * {
        margin: 0px;
      }
    </style>
    <script type="text/javascript">
      function getSize() {
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth ||          document.body.clientHeight ) ) {
          //IE 4 compatible
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
        }
        return {x:myWidth,y:myHeight};
      }

      window.onload = function () {
        canvas = document.getElementById('canvas');
        var size = getSize();
        canvas.width = size.x;
        canvas.height = size.y;
      };
    </script>
  </head>

  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
  </body>

</html>

这可能是你的CSS有问题

我将“所有元素”移到顶部，并将画布完全放置在安全的位置

让我知道这是否有效：

<style type="text/css">
          * {
              margin: 0px;
              padding:0px;
          }
          #canvas {
              position:absolute;
              left:0px;
              top:0px;
              background-color: #EEEEEE;
          }

</style>

这可能是你的CSS有问题

我将“所有元素”移到顶部，并将画布完全放置在安全的位置

让我知道这是否有效：

<style type="text/css">
          * {
              margin: 0px;
              padding:0px;
          }
          #canvas {
              position:absolute;
              left:0px;
              top:0px;
              background-color: #EEEEEE;
          }

</style>

将画布切换到块为我实现了以下目的：

帆布{ 显示：块；背景色：EEEE； }

将画布切换到块为我实现了以下目的：

帆布{ 显示：块；背景色：EEEE； }

特别是，画布是一个内联元素，所以它有一个基线，就像所有其他内联元素一样。因此，代码创建了一个窗口大小的画布，但它必须位于块底部上方的基线上。在这种情况下，更改画布的垂直对齐也会起作用，但显示：block；是更好的解决方案。特别是，画布是一个内联元素，所以它有一个基线，就像所有其他内联元素一样。因此，代码创建了一个窗口大小的画布，但它必须位于块底部上方的基线上。在这种情况下，更改画布的垂直对齐也会起作用，但显示：block；这是更好的解决办法。