画布 - 相对于高度保持 16:9 的纵横比

Question

这个问题应该很简单，我一直没弄明白！甚至看到其他关于保持纵横比的帖子，因为他们都在谈论保持纵横比相对于宽度。

例如，如果我希望它具有完整宽度的画布并保持 16:9 的纵横比，我会使用以下代码：

var can = document.getElementById('canvas');
can.width = window.innerWidth;
can.height = can.width * (9 / 16);

我正在尝试将 Canvas 设置为用户浏览器的高度，这很容易。

但是我怎样才能计算出画布的宽度呢？例如：

如果我的高度 768，我知道宽度应该是 1360，这样可以保持 16:9 的纵横比，但是计算公式是什么宽度看到高度是可变的？

先谢谢你了！

Answer 1

根据你的代码，相对宽度可以计算如下

var can = document.getElementById('canvas');
can.height = window.innerHeight;
can.width = can.height * (16/9);