使畫布儘可能大而不使用滾動條

我想創建一個網頁，其中包含一個畫布對象，該對象填充屏幕而不創建滾動條。使畫布儘可能大而不使用滾動條

將畫布寬度和高度設置爲$（window）.height（）和$（window）.width（）會產生滾動條。減少幾個像素的寬度是不可靠的，因爲我需要減少的數量因瀏覽器而異。

是否有跨瀏覽器的方式來做到這一點？

2013-04-06 rvabdn

在Chrome中，這對我很有用。

<html> 
    <head> 
     <title></title> 
     <script> 
      function init() { 
       var canvasBG = document.getElementById("test"); 
       var ctxBG = _canvasBG.getContext("2d"); 

       canvasBG.style.width = window.innerWidth; 
       canvasBG.style.height = window.innerHeight; 
      }; 

      window.onload = init; 
     </script> 
    </head> 
    <body> 
     <canvas id="test" style="background:#eeeeee; 
       margin:0; padding:0; 
       position:absolute; 
       top:0; left:0"> 
     </canvas> 
    </body> 
    </html>

更新：您可能還需要附加一個調整大小的監聽器頁面，所以如果用戶改變頁面，您可以重新設置寬度/高度。

來源

2013-04-07 22:43:31 Jarrod

-2

所有支持canvas元素的瀏覽器也支持css固定位置。所以做這樣的事情：

#my_canvas { 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
}

來源

2013-04-06 22:49:03 linepogl

你的回答不完整 – 2013-04-07 22:44:42

根據我的經驗，這延伸了畫布內容而不是改變繪畫區域。 – icktoofay 2013-04-08 00:33:03

使畫布儘可能大而不使用滾動條

回答

相關問題