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更改canvas的宽度和高度应该会在不改变内在大小的情况下扭曲它，就像使用任何其他图像一样。

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

1 个答案: