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

Question

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

4

我正在编写一个JavaScript游戏，使用requestFullscreen功能时遇到了一些问题。我的游戏由一个菜单和一个按钮（HTML5按钮）组成，用于启动游戏循环。但是当我进入全屏模式时，菜单会进入全屏模式，但可以启动游戏循环的按钮却消失了。我想知道在画布全屏模式下是否仍然可以保留HTML5按钮。

提前感谢您的回答。

- Bosiwow

抱歉，没关系。全屏功能并不是很方便，我认为我不会使用它（它在全屏时禁用了一些游戏控件，出于安全原因），而且它只会将我的画布居中并使其余部分变黑，它并不是真正的全屏（在Chrome上）。而在Firefox上，它会拉伸宽度和高度以适应屏幕，这使得它看起来相当丑陋。所以谢谢你，但我想我不会使用它。 - Bosiwow

将游戏的所有HTML代码放在一个包含<div>的容器中，并使其全屏。您可以使用CSS控制高度/宽度、拉伸/不拉伸 - 请参见此处。别放弃全屏模式，它很棒。 - d13

好的，谢谢，明天我会尝试一下 :D - Bosiwow

它使用了div方法，谢谢:D - Bosiwow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

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

由于画布元素不能有子元素，因此您需要将其以及您想要查看的元素包装在父容器中，即一个

元素。

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

现在你可以在封面上请求全屏模式。

请注意：全屏API并不是最终版本，并且在不同的浏览器中表现不同。您可能需要为每个元素添加特定的CSS，以区分全屏模式和非全屏模式。