2012-02-12 38 views
1

我做了一个页面,画布应该填满窗口。它可以工作,但出于某种原因滚动条出现。我不知道,错误是什么。当我调整画布大小时,为什么会出现滚动条?

<!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> 

回答

3

切换#canvas以块为我做的伎俩:

#canvas { 
    display: block; 
    background-color: #EEEEEE; 
} 
+2

特别是,画布是一个内联元素,所以它有一个基线,就像所有其他内联元素一样。因此,代码创建了一个与窗口大小相同的画布,但它必须位于块底部之上的基线上。在这种情况下,更改画布的垂直对齐方式也会起作用,但是'display:block;'是更好的解决方案。 – Neil 2012-02-12 21:45:39

1

这可能是您的CSS的问题。

我将'所有元素'移到顶部,并且为了安全起见将画布完全定位。

让我知道,如果这个工程:

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

</style> 
相关问题