将canvas元素的高度和宽度设置为window.innerHeight/innerWidth,导致滚动条

Ben*_*enR 11 html javascript css

这非常简单,但我无法弄清楚它为什么会导致滚动条.这是代码:

CSS

body, canvas, html{margin:0;padding:0;border:0 none;}
canvas{background:Black;}
Run Code Online (Sandbox Code Playgroud)

HTML

<html>
    <head></head>
    <body></body>
</html>?
Run Code Online (Sandbox Code Playgroud)

JavaScript的

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementsByTagName("body")[0].appendChild(canvas);???????
Run Code Online (Sandbox Code Playgroud)

这不应该只是导致画布跨越可视窗口的宽度和高度?这是一个JSFiddle示例:http://jsfiddle.net/TyJYH/

小智 22

我通过将canvas标签的CSS显示属性设置为"阻止"来解决了同样的问题.

canvas {
  display: block;
}
Run Code Online (Sandbox Code Playgroud)

  • 哦!我刚刚意识到当 `&lt;canvas&gt;` 是 `display: inline` 时,它有 lineheight。 (3认同)