javascript - html5画布纵横比？

Question

在 html5 画布元素使用中，默认纵横比存在问题。Firefox 和 Safari 中画布元素的默认纵横比，宽度和高度至少为 2/1。这是唯一一个高度和宽度的组合，它将为绘制到画布元素的矩形产生 1:1 的纵横比。

那么，如何设置画布元素的纵横比以允许绘制到它的项目的比例为 1:1？

我在 Coding Forums 有一个帐户，但没有得到足够的回应。我已经获得了一些关于这个主题的印刷文本，但他们没有解决这个问题。我已经编程 javascript/html/css 至少 10 年了。

我希望我不会被一个不可改变的默认比率所困。

查看类似问题的列表，我没有看到这个特定问题得到解决。

Answer 1

Canvas 可以有自己的宽度和高度，独立于 Dom 元素。这导致了非 1:1 的纵横比。

要修复，您需要设置宽度和高度属性以匹配包含 dom 的元素的宽度和高度。

例如，在 jquery 中，您可以执行以下操作。

$('canvas').attr('width', '100').attr('height', '100');

这将使您的画布成为 100 像素的正方形。假设这是在具有匹配宽度和高度属性的 dom 元素中，那么您将获得 1:1 的纵横比。