HTML5多畫布全屏

我正在製作html5遊戲。它使用幾個畫布。HTML5多畫布全屏

<div id="GameContainer" > 
<canvas id="MapCanvas" width="1200" height="690" style=" position:absolute;z-index: 1s; "> 
Your browser does not support the canvas element. 
</canvas> 
<canvas id="CellHighLightCanvas"width="1200" height="690" style=" position:absolute;z-index: 2;"> 
Your browser does not support the canvas element. 
</canvas> 

<canvas id="UnderUnitCanvas" width="1200" height="690" style="position:absolute; z-index: 3;"> 
Your browser does not support the canvas element. 
</canvas>

我試圖讓全屏。我用這個方法：

if (element.requestFullScreen) 
      element.requestFullScreen(); 
     else if (element.webkitRequestFullScreen) 
      element.webkitRequestFullScreen(); 
     else if (element.mozRequestFullScreen) 
      element.mozRequestFullScreen();

其中元件是分別從畫布（此代碼內循環），但它僅適用於1個畫布。我怎麼能爲所有的畫布做這個？

來源

2013-09-29 Yury

什麼是'element'？ – ComFreek

@ComFreek元素每個都來自畫布（這段代碼在循環中） – Yury

也許我誤解了你的問題 - 如果你試圖展示其中的幾個畫布，你究竟會提出任何畫布都是'全屏'屏幕「一次？某些東西是全屏的，或者不是。不能共享 - 兩個項目不能一次全屏顯示。如果可以的話，他們每個都是'半屏'...（請參閱「全屏」定義和您的請求中的矛盾）您可以製作一個頁面或iframe全屏 - 每個可能包含幾個畫布元素。 – enhzflep

一次不能有多個元素全屏。使用父div：

var element = document.getElementById("GameContainer"); 

if (element.requestFullScreen) 
    element.requestFullScreen(); 
else if (element.webkitRequestFullScreen) 
    element.webkitRequestFullScreen(); 
else if (element.mozRequestFullScreen) 
    element.mozRequestFullScreen();

來源

2013-09-29 10:26:15

我在嘗試提出問題之前嘗試了這個變體。但是，正如你所看到的每個畫布都有固定的大小如果我將設置「GameContainer」的全屏。它只會放大div而不是畫布。如果我將畫布的寬度和高度設置爲100％。他們會太大，因爲他們的立場是絕對的。 – Yury

你將不得不重做你的CSS，因爲以上是做到這一點的唯一方法。 –

HTML5多畫布全屏

回答

相關問題