如何使 Html5/Javascript 画布填充窗口屏幕？答案

【问题标题】：how can I make Html5/Javascript canvas fill window screen?如何使 Html5/Javascript 画布填充窗口屏幕？
【发布时间】：2015-08-09 21:45:42
【问题描述】：

我是 HTML 初学者，用 Tululoo (http://www.tululoo.com/) 制作了一个 HTML5 游戏。这个“示例”(http://trailsite555.eu.pn/game/) 工作正常，但是有没有办法让画布填满浏览器窗口？（比如 Chrome/Firefox），还有没有办法让手机屏幕也充满？

【问题讨论】：

标签： javascript html css browser html5-canvas

【解决方案1】：

canvas 标签不是百分比，而是像素。

因此，您必须计算视口的实际尺寸并将其应用到您的画布上。你仍然需要在 CSS 中隐藏滚动条。

代码如下：

//return an obect with the dimension of the viewport of the browser
function getViewportDimension() {
var e = window, a = 'inner';
if (!( 'innerWidth' in window )) {
    a = 'client';
    e = document.documentElement || document.body;
}
return {w:e[a + 'Width'], h:e[a + 'Height']};
}

//apply the dimension to the canvas
var dim = getViewportDimension();
canvas.width = dim.w;
canvas.height = dim.h;

隐藏滚动条的 CSS 代码：

html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

请记住，调整画布大小会清除其内容。

【讨论】：

谢谢，但我不知道该放在哪里。反正这两天很忙，我等会再试试。
快速而肮脏的方法是将JS放在你的html页面中，就在canvas标签创建之后。 canvas 变量是画布标签的处理程序，例如用 JQuery 捕获。关于CSS，这只是一个正常的调用:)

【解决方案2】：

那行代码

<canvas id="[object Object]" width="640" height="360" style="background-color: rgb(46, 90, 65); border: 0px;"></canvas>

你为什么选择width="640"和height="360"？

将它们都更改为 100%，它应该修复它。

【讨论】：

与 tululoo 我不能这样做吗？，它是内置的 .. 尝试更改它但它不起作用，如果您可以编辑某些内容，请查看此文件：trailsite555.eu.pn/game/game.js 更改后：trailsite555.eu.pn/game/gameAfter.js
看，完成项目后，使用任何编辑器，甚至记事本打开 HTML 文件，并将值更改为 100%，正如我之前解释的那样。不幸的是我现在不在家，但稍后我会尝试自己为您做，但我更喜欢您自己尝试，这样您可以更好地学习。祝你好运朋友。 ;)
试过了，没用。。。我觉得tululoo用复杂的方法不能编辑。。。