Animate CC HTML5-切换全屏

Question

我在脚下有此代码（如下），可以强制我的HTML5游戏全屏显示，但是我想也通过按钮将其返回-现在，它只能使用ESC键。有可能吗？

this.fsbtn.addEventListener("click", doFullscreen);

function doFullscreen() {
    var i;
    var elem = document.getElementById("animation_container");
    var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];

    for (i = 0; i < 4; i++) {
        if (elem[fs[i]]) {
            elem[fs[i]]();
            break;
        }
    }
}

Answer 1

当然可以。将您的doFullscreen函数更改为toggle one，以检查其是否为全屏显示：

function toggleFullscreen(event) {
    var element = document.body;

    if (event instanceof HTMLElement) {
        element = event;
    }

    var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

    element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen ||           element.mozRequestFullScreen || function () {
        return false;
    };
    document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen ||           document.mozCancelFullScreen || function () {
        return false;
    };

    isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}

Answer 2

在此处阅读fullscreen API

的文档

您可以使用下面列出的功能退出全屏模式（有关更多阅读文档）

在JS / HTML代码中，您可以添加具有绝对位置和高z-index的按钮。编写新的单击侦听器以添加按钮，然后运行cancelFullscreen功能。

用于全屏模式的JS函数示例：

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        videoElement.mozCancelFullScreen();
      } else {
        videoElement.webkitCancelFullScreen();
      }
    }
  }

工作示例，您可以在这里看到：https://developer.mozilla.org/samples/domref/fullscreen.html