Canvas下面的白色空白空间

Question

花了几个小时摆弄代码后，我遇到了问题。我创建了一个灰色的HTML画布，它将填满整个屏幕，并且它有效。但即使画布应该是屏幕上唯一可见的对象，当我向下滚动时，页面底部仍然会出现一个小的空白空间。我已经知道它与身体无关，因为我已经尝试将颜色改为灰色。

这是我的代码：

目：

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    canvas {
        background-color: #1A1A1A;
    }
</style>

体：

<canvas onload="init();" id="canvas"></canvas>
<script>
    var size = {
        width: window.innerWidth || document.body.clientWidth,
        height: window.innerHeight || document.body.clientHeight
    }
    canvas.height = size.height;
    canvas.width = size.width;
</script>

Answer 1

将显示块添加到canvas元素。默认画布是内联元素，这是他们的常见行为：

canvas {
    background-color: #1A1A1A;
    display: block;
}

演示：http://jsfiddle.net/LvSxN/

尝试发表评论display: block，了解它如何改变一切。

此外，您不需要javascript。 CSS应该足够了：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
canvas {
    background-color: #1A1A1A;
    display: block;
    width: 100%;
    height: 100%;
}

演示：http://jsfiddle.net/LvSxN/1/