html - 转到全屏画布时，HTML5 按钮消失

Question

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

提前致谢

Answer 1

请求全屏模式将使元素（及其子元素）全屏显示。其他任何东西都将被隐藏。

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

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

现在您可以在cover.

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