将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导致滚动条

回答

相关问题