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