如何制作Html5 / Javascript画布填充窗口画面?

时间:2013-03-16 15:57:28

标签: javascript html5 css3 browser html5-canvas

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

2 个答案:

答案 0 :(得分:0)

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;
}

请记住,调整画布大小会清除它的内容。

答案 1 :(得分:-1)

那行代码

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

你为什么要width="640"height="360"

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