HTML5多画布全屏

Question

我正在制作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个画布。我怎么能为所有画布做这个？

Answer 1

您不能同时拥有多个全屏元素。使用父div：

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

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