使画布填满整个页面

Question

如何使画布在页面的宽度和高度上达到100%？

Answer 1

好吧,我有它在这里工作:谷歌的Bouncing Balls HTML5？使用以下CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

其中#c是canvas元素的id.

Answer 2

您可以在没有jquery的情况下使用这些代码

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];

Answer 3

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

也许那么容易？

Answer 4

这与<canvas>标签有关.

创建全屏画布时,<canvas>如果未设置为display:block ,则会导致滚动条.

详情:http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen