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

Question

我有一个简单的html5页面，其中包含一定大小的canvas元素。现在我希望canvas元素始终使用页面中的可用大小进行缩放，但仍保持一定的宽高比。

如何在javascript代码中获取canvas元素的当前比例因子？

谢谢！

Answer 1

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

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

为了保持你的比例，你只需要数学： newH = newW /（w / h）;

要获得宽度和高度，只需使用document.getElementById（“canvas”）。width / height

Answer 2

这应该有效

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

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