我該如何製作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填充窗口畫面？

回答

相關問題