Question

我正在使用canvas进行编程，并希望添加全屏支持。我找到了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”时，生成的屏幕居中且非常小。

Answer 1

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

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

您需要通过填充边缘来处理代码。

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

specifications只要我浏览它就没有说明这一点。但是，全屏模式目前在大多数主流浏览器中都处于实验状态，行为因浏览器而异，并且不稳定且容易出错。

来自Mozilla Developer Network：

值得注意的是Gecko和WebKit之间的关键区别此时的实现：Gecko会自动添加CSS规则拉伸它以填充屏幕的元素：“宽度：100％;高度： 100％“。WebKit没有这样做;相反，它以全屏为中心屏幕中相同大小的元素，否则为黑色。要得到在WebKit中，您需要添加自己的全屏行为 “宽度：100％;高度：100％;” CSS自己对元素进行规则[...] 另一方面，如果你试图模仿WebKit的行为 Gecko，你需要放置你想要出现的元素另一个元素，你将全屏，而使用CSS 调整内部元素以匹配所需外观的规则。

如果您还没有，则应检查不同浏览器中的结果，以查看您遇到的行为是否相同或相同。

requestFullScreen（）仅适用于宽度和相对位置吗？

1 个答案: