HTML5畫布適合窗口

Question

我試圖讓我的畫布，以適合頁面，當我這樣做：

ctx.canvas.width = window.innerWidth; 
ctx.canvas.height = window.innerHeight; 

它去剛過水平和垂直方向這是增加滾動條。 它的大小是關於滾動條的大小正在考慮之前，他們甚至在那裏（只是一個猜測），這是怎麼回事，我怎麼會得到它適合頁面沒有滾動條。

Answer 1

將畫布位置設置爲absolute。還要確保沒有填充或包含元素中設置的頁邊距。

這就是我在我所有的全屏畫布演示中使用的。

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
canvas { 
    position:absolute; 
} 

Full Screen Demo

Answer 2

這爲我工作

function resize() { 

    var canvas = document.getElementById('game'); 
    var canvasRatio = canvas.height/canvas.width; 
    var windowRatio = window.innerHeight/window.innerWidth; 
    var width; 
    var height; 

    if (windowRatio < canvasRatio) { 
     height = window.innerHeight; 
     width = height/canvasRatio; 
    } else { 
     width = window.innerWidth; 
     height = width * canvasRatio; 
    } 

    canvas.style.width = width + 'px'; 
    canvas.style.height = height + 'px'; 
}; 

window.addEventListener('resize', resize, false); 

Answer 3

默認畫布設置爲display: inline-block。將其更改爲display: block

body { 
    margin: 0; 
    padding: 0; 
} 
canvas { 
    display: block; 
} 

Answer 4

我有同樣的問題，我通過刪除border解決它。