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();

其中element来自画布（此代码位于循环内），但仅适用于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();