0

我正在用画布编写一些东西，并想添加全屏支持。我发现 API 及其工作，但有一些问题：

首先，我认识到全屏模式使用显示器的全宽。但是我的画布元素是一个正方形，所以并不是所有的高度都显示在 16:9 的显示器上。是否可以根据元素的高度全屏显示？

另一个问题是全屏似乎不支持绝对定位元素。我的代码如下所示：

<div id="canvasWrapper" style="positon: relative;">
    <p><button ng-click="fullscreen()">Go Fullscreen</button></p>
    <canvas id="bgCanvas" style="position: absolute; border: 1px #E5E5E5 solid;"></canvas>
    <canvas id="canvas" style="position: absolute; border: 1px #E5E5E5 solid;"></canvas>
</div>

此代码为我的画布启用了多个图层。但是当我全屏显示 div“canvasWrapper”时，结果屏幕居中且非常小。

4

1 回答 1

0

是否可以根据元素的高度全屏显示？

不，全屏模式不关心它启动的元素的比例 - 它会使用屏幕尺寸作为目标。

您将需要通过填充边缘在代码中处理此问题。

另一个问题是全屏似乎不支持绝对定位元素。

就我浏览它所看到的而言，规范没有说明任何内容。但是，全屏模式目前在大多数主流浏览器中处于实验状态，并且行为可能因浏览器而异，并且不稳定且容易出现错误。

来自Mozilla 开发者网络：

值得注意的是此时 Gecko 和 WebKit 实现之间的一个关键区别：Gecko 自动将 CSS 规则添加到元素以将其拉伸以填充屏幕：“宽度：100%；高度：100%”。WebKit 不这样做；取而代之的是，它将全屏元素以相同大小集中在一个原本为黑色的屏幕中。要在 WebKit 中获得相同的全屏行为，您需要添加自己的“宽度：100%；高度：100%；” CSS 规则自己的元素 [...] 另一方面，如果你试图在 Gecko 上模拟 WebKit 的行为，你需要将你想要呈现的元素放在另一个元素中，你将改为全屏，并使用 CSS 规则调整内部元素以匹配您想要的外观。

如果你还没有，你应该检查不同浏览器的结果，看看你遇到的行为是不同还是相同。

于 2013-07-16T21:56:59.527 回答