html - 让画布占据尽可能多的空间

Question

我试图让我的 HTML5 Canvas 占据尽可能多的空间。我正在为使用画布的 Firefox OS 制作游戏，并使用 Firefox OS 模拟器进行测试。

“尽可能多的空间”是指整个屏幕，没有滚动条。

理想情况下，首选跨平台方式（也适用于 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;
};

全屏演示

Answer 2

这应该可以解决问题：

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

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

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