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/