进入全屏画布时 HTML5 按钮消失

Question

我正在编写一个 javascript 游戏，但在尝试让我的游戏使用 requestFullscreen 功能时遇到了一些麻烦。我的游戏存在一个带有按钮（html5 按钮）的菜单来启动游戏循环。但是当我进入全屏时，菜单变为全屏，但是可以启动游戏循环的按钮消失了。我想知道在画布全屏模式下是否仍然可以在屏幕上显示 html5 按钮。

提前致谢

Answer 1

请求全屏模式将使元素（及其子元素）全屏。其他任何内容都将被隐藏。

由于画布元素不能有子元素，因此您需要将其和您想要在父容器中看到的元素包装起来，即。一个div元素。

<div id="cover">
    <canvas ... ></canvas>
    <button ... >My button</button>
</div>

现在您可以在 上请求全屏模式cover。

但请注意：全屏 API 不是最终版本，并且不同浏览器的行为有所不同。您可能需要为全屏模式与非全屏模式的每个元素添加特定的 CSS。