使画布占据尽可能多的空间

Question

我试图让我的HTML5 Canvas占用尽可能多的空间。我正在开发一款使用画布并使用Firefox OS模拟器进行测试的Firefox OS游戏。

尽可能多的空间＆＃34;，我的意思是整个屏幕，没有滚动条。

理想情况下，首选跨平台方式（也适用于Android和iOS）。

Answer 1

您需要做一些事情，将画布位置设置为absolute，并确保在包含元素中没有设置填充或边距。

以下是我在所有画布演示中使用的内容

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

的JavaScript

var canvas = document.getElementById("canvas"),
    width = window.innerWidth,
    height = document.body.offsetHeight;

window.onresize = function () {
    height = canvas.height = document.body.offsetHeight;
    width = canvas.width = document.body.offsetWidth;
};

<强> Full Screen Demo

Answer 2

这应该可以解决问题：

$("canvas").width($("body").width());
$("canvas").height($("body").height());

window.onresize = function(){
  $("canvas").width($("body").width());
  $("canvas").height($("body").height());
};

用画布选择器替换画布。这需要jQuery。