我是 HTML 的初学者,用 Tululoo ( http://www.tululoo.com/ ) 制作了一个 HTML5 游戏。这个“示例”( http://trailsite555.eu.pn/game/ ) 工作正常,但是有没有办法让画布填满浏览器窗口?(如 Chrome/Firefox),还有没有办法填充手机屏幕?
问问题
1573 次
2 回答
0
画布标签不是百分比,而是像素。
所以你必须计算视口的实际尺寸并将其应用到你的画布上。您仍然必须在 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;
}
请记住,调整画布大小会清除其内容。
于 2013-03-17T09:22:20.753 回答
-1
That line of code
<canvas id="[object Object]" width="640" height="360" style="background-color: rgb(46, 90, 65); border: 0px;"></canvas>
Why did you make it width="640"
and height="360"
?
change them both to 100%, it should fix it up.
于 2013-03-16T16:02:40.567 回答