如何使用畫布元素填充瀏覽器窗口而不創建滾動條？

我有一個問題讓我的窗口大小，我試試這個代碼：如何使用畫布元素填充瀏覽器窗口而不創建滾動條？

的Javascript

var game; 
function game() { 
    this.canvas = document.getElementById('canvas'); 
    this.canvasWidth = window.innerWidth; 
    this.canvasHeight = window.innerHeight;  
    this.initCanvas = function() { 
     this.canvas.style.width = this.canvasWidth + "px"; 
     this.canvas.style.height = this.canvasHeight + "px"; 
    } 
    this.run = function() { 
     this.initCanvas(); 
    } 
} 
game = new game(); 
game.run();

我也有

CSS

html, body { 
    padding: 0; 
    margin: 0; 
}

只有

我我的身體上有一塊帆布。

問題是，我有一個垂直和水平滾動條。這意味着畫布的大小太大。如何使窗口大小不顯示滾動條？

來源

2012-12-13 Ajouve

你的代碼有什麼問題？ – Luke

那麼你會得到什麼？ –

當你說窗口大小時，你指的是哪個窗口？瀏覽器窗口？頁面尺寸？ – Jono

它看起來像你只是想讓你的畫布有100％的寬度和高度。

HTML

<body> 
    <canvas id="canvas"></canvas> 
</body>

CSS

body, html { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
} 
canvas { 
    background: #ffcccc; 
    height: 100%; 
    width: 100%; 
    display: block; 
}

Demo

或者，如果你想用你的代碼，但擺脫：您可以只用CSS做窗口上的滾動條，你n在畫布標籤上指定block。

CSS