html - 如何使 Firefox 全屏模式像 Chrome 一样(即不拉伸(stretch)内容)

Question

我正在为我的游戏应用程序使用现代浏览器的全屏 API，Chrome 在这方面表现出色，并提供了一个窗口调整大小事件，允许根据新的全屏尺寸重置 Canvas 尺寸。 Firefox 也尊重事件并允许重新调整大小，但无论如何都会将 Canvas 拉伸(stretch)到全屏，所有图形和鼠标距离都会失真。

有谁知道如何让 firefox 在这方面表现得像 chrome，即如何删除应用于 canvas 元素的自动 css 规则？

在窗口调整大小处理程序中执行以下操作不会在 firefox 中执行任何操作

var w = $(window).width();
var h = $(window).height();
var size = Math.min(w,h);

var elem = document.getElementById("canvas");
elem.style.width = size+"px";
elem.style.height = size+"px"; 

我认为这可以通过将 Canvas 放在 div 容器的中央并拉伸(stretch)容器来允许调整 Canvas 尺寸从而保持纵横比来实现。

Answer 1

不要给 canvas 设置样式，直接设置它的宽度:

var elem = document.getElementById("canvas");
elem.width = size;
elem.height = size;

使用 CSS 更改 canvas 的宽度和高度应该会扭曲它而不改变固有大小，就像任何其他图像一样。