缩放画布元素并保持纵横比

Question

我有一个简单的 html5 页面，其中有一个特定大小的画布元素。现在我希望画布元素始终根据页面的可用大小进行缩放，但仍保持一定的纵横比。

另外，如何在 JavaScript 代码中获取画布元素的当前比例因子？

Answer 1

如果 w 是你的宽度，h 你的高度。
w/h 是你的比率。

现在你的页面宽度更大或更小了。
假设您的新宽度名称是 newW。
而你正在寻找新的H.

为了保持你的比例，只需做一下数学计算：
新H = 新W / (w/h);

要获取宽度和高度，只需使用 document.getElementById("canvas").width/height

Answer 2

这应该可行

canvas {
 outline: 0px;
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: auto;
}

这里的关键是高度会自动调整为画布元素所处的任何宽高比。