我试图用我的画布全屏显示3层。但是每当我使用mozrequestfullscreen方法时,它只能在一个图层上工作(因为它需要一个参数)。我只是想问一下使用mozrequestfullscreen函数有没有办法全屏显示所有图层?
//CSS
#canvas-container {
width: 100%;
text-align:center;
margin:auto;
}
div.fullscreen:-webkit-full-screen {
width: 100%;
height: 100%;
}
div.fullscreen:-moz-full-screen {
width: 100%;
height: 100%;
}
//HTML
<div id="canvas-container">
<div class="fullscreen">
<canvas id="layer1" width="800" height="500"
style="position: absolute; z-index: 0; border:3px solid #EE6D00; "></canvas>
<canvas id="layer2" width="800" height="500"
style="position: absolute; z-index: 1; border:3px solid #EE6D00; "></canvas>
<canvas id="layer3" width="800" height="500"
style="position: relative; z-index: 2; border:3px solid #EE6D00; "></canvas>
</div>
</div>
<button class="button" onclick="goFullscreen(); return false">max</button>
//JavaScript
var cn = document.getElementsByClassName("fullscreen");
function goFullscreen() {
// Get the element that we want to take into fullscreen mode
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (cn.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
cn.mozRequestFullScreen();
} else if (cn.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
cn.webkitRequestFullScreen();
}
}