將canvas元素的高度和寬度設置爲window.innerHeight/innerWidth導致滾動條

這是非常直接的，但我不明白爲什麼它會導致滾動條。下面是代碼：將canvas元素的高度和寬度設置爲window.innerHeight/innerWidth導致滾動條

CSS

body, canvas, html{margin:0;padding:0;border:0 none;} 
canvas{background:Black;}

HTML

<html> 
    <head></head> 
    <body></body> 
</html>

的JavaScript

var canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.getElementsByTagName("body")[0].appendChild(canvas);

不應該只有這會導致畫布跨越寬度和高度o f可視窗口？這裏有一個例子的jsfiddle：http://jsfiddle.net/TyJYH/

來源

2012-07-02 BenR

可能是包含元素，正文和html，正在圍繞畫布添加邊距或填充。您可以使畫布位置絕對或固定，或者將邊距和填充值明確設置爲0. – kennebec

我通過canvas標籤的CSS顯示屬性設置爲解決這個同樣的問題，「塊」。

canvas { 
    display: block; 
}

來源

2013-04-04 07:04:24 mudphone

謝謝你，我在找到這個答案之前閱讀了很多問題。我找到的最瘋狂的解決方案是將位置：將透明圖像固定到窗口的右下角，並使用它來獲取測量結果。這被接受和upvoted！ –

D'oh！我剛剛意識到，當'

這將解決這個問題：

canvas { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
}

來源

2012-07-02 22:35:32 RhinoWalrus

感謝您的輸入。這更像是一種「黑客」。我關心的更多的是爲什麼將元素指定爲與可見窗口相同的高度/寬度導致滾動條，儘管我將所有啓用的元素指定爲具有零邊距，填充和邊框。 – BenR

http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport。少'哈克'。 :-) – RhinoWalrus

將canvas元素的高度和寬度設置爲window.innerHeight/innerWidth導致滾動條

回答

相關問題