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

Question

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

另外我怎样才能在javascript代码中获取canvas元素的当前比例因子？

Answer 1

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

现在您的页面宽度变大或变小。 假设您的新宽度名称是 newW。 而您正在寻找 newH。

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

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

Answer 2

这应该有效

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

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