我该如何制作Html5/Javascript canvas填充窗口画面？

我是HTML初学者，和Tululoo（http://www.tululoo.com/）做了一个HTML5游戏..这个“示例”（http://trailsite555.eu.pn/game/）工作正常，但有没有办法让canvas充满浏览器窗口？（如Chrome/Firefox），还有一种方法可以填充移动屏幕吗？我该如何制作Html5/Javascript canvas填充窗口画面？

来源

2013-03-16 ahmadmanga

-1

这行代码

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

你为什么要把它width="640"和height="360"？

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

来源

2013-03-16 16:02:40

与tululoo我无法做到这一点？，它的内置.. 试图改变它，它不工作，看到这个文件，如果你可以编辑的东西：http：//trailsite555.eu.pn/game/game.js 后改变它：http： //trailsite555.eu.pn/game/gameAfter.js – ahmadmanga 2013-03-16 17:01:11

难道你不能手动改变它吗？ – 2013-03-16 18:30:55

不，尝试但不能，也许我不擅长HTML？ – ahmadmanga 2013-03-16 20:50:29

画布标记不是以百分比表示，而是以像素为单位。

因此，您必须计算视口的实际尺寸并将其应用于画布。您仍然必须隐藏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-17 09:22:20

谢谢，但我不知道该把它放在哪里。无论如何，这两天我很忙，我会尽量做到这一点。 – ahmadmanga 2013-03-17 21:23:32

快速而肮脏的方法是在创建canvas标签之后将JS放入您的html页面。 'canvas'变量是你的canvas标签的处理器，例如使用JQuery。关于CSS，这只是一个正常的呼叫:) – 2013-03-17 22:01:37

我该如何制作Html5/Javascript canvas填充窗口画面？

回答

相关问题