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

Question

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

提前致谢

Answer 1

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

由于canvas元素不能有子元素，您需要将它包装在想要在父容器中看到的元素，即。一个div元素。

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

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

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