html - 如何制作像chrome一样的firefox全屏模式（即不拉伸内容）

Question

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

有谁知道如何让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"; 

我认为这可以通过将画布居中放置在 div 容器中来完成，并且容器被拉伸，从而允许调整画布尺寸，从而保持纵横比。

Answer 1

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

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

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