如何使Html5/Javascript画布填充窗口屏幕?

如何使Html5/Javascript画布填充窗口屏幕?,javascript,html,css,browser,html5-canvas,Javascript,Html,Css,Browser,Html5 Canvas,我是HTML的初学者,用Tululo()制作了一个HTML5游戏。。这个“示例”(example)可以很好地工作,但是有没有办法让画布填充浏览器窗口?(比如Chrome/Firefox),还有什么方法可以填充手机屏幕吗?那一行代码 <canvas id="[object Object]" width="640" height="360" style="background-color: rgb(46, 90, 65); border: 0px;"></canvas>

我是HTML的初学者,用Tululo()制作了一个HTML5游戏。。这个“示例”(example)可以很好地工作,但是有没有办法让画布填充浏览器窗口?(比如Chrome/Firefox),还有什么方法可以填充手机屏幕吗?

那一行代码

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

您为什么选择了
width=“640”
height=“360”


将两者都更改为100%,应该可以解决问题。

画布标记的单位不是百分比,而是像素

因此,您必须计算视口的实际尺寸,并将其应用于画布。 最后,您仍然必须在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;
}

请记住,调整画布大小将清除其内容。

使用tululoo,我无法做到这一点,它是内置的。。试图更改它,但它不起作用,请查看此文件,如果您可以编辑某些内容:更改后:查看,在完成项目后,使用任何编辑器(甚至记事本)打开HTML文件,并将值更改为100%,如我前面所述。不幸的是,我现在不在家,但稍后我会尝试为您自己做,但我更希望您自己尝试,这样您可以学习得更好。祝你好运,朋友试过了,但没用。。。我认为使用复杂方法的Tululo无法编辑..谢谢,但我不知道放在哪里。不管怎样,这两天我很忙,我会稍后再做。快速而肮脏的方法是在创建canvas标记之后,将JS放入html页面。
canvas
变量是canvas标记的处理程序,例如用JQuery捕获。关于CSS,这只是一个普通的调用:)