javascript - CanvasRenderingContext2D.measureText() 是否随当前转换而变化？

Question

根据 MDN , .measureText().width “包含以 CSS 像素为单位的文本的提前宽度(该行内框的宽度)”，这意味着屏幕上的显示大小，这意味着如果我调用 .scale(2,2) 在我调用 .measureText() 之前在 Canvas 上，我将得到两倍大的宽度。但是，我在 Chrome 上的测试表明 .measureText() 在我缩放 Canvas 时不会改变。在我看来，即使我在不​​同的 Canvas 上调用该函数，.measureText() 也会返回相同的内容，只要使用的字符串相同即可。

我是不是读错了 MDN，我能期望所有现代浏览器都以与 Chrome 相同的方式工作吗？

我为什么问这个问题:

我正在尝试使用离屏 Canvas 进行预渲染，但离屏 Canvas 的宽度取决于我需要显示的文本量。因此，在创建屏幕外 Canvas 之前，我在主 Canvas 上调用 .measureText() 似乎更可取。

Answer 1

CSS 像素是实际物理像素之上的抽象像素大小/单位。如果我们将浏览器窗口缩放到 200%，定义为 100px CSS 像素的内容仍将是 100px CSS 像素，但它将占用 200 个物理像素。

因此，当结果以 CSS 像素形式返回时，这意味着尺寸不受比例等因素的影响。

因此，无论 Canvas context 上的当前变换如何，都应该安全地假设您将获得相同大小的字体。

而且很容易验证:

var ctx = document.createElement("canvas").getContext("2d");
ctx.font = "20px sans-serif";
console.log("Scale 100%", ctx.measureText("WWW").width);
ctx.scale(2,2);
console.log("Scale 200%", ctx.measureText("WWW").width);

在 Firefox 中:

在 Blink 引擎中(这里是 Opera):

IE11:

等等。尽管应用了缩放变换，但大小还是相等的(浏览器之间的数字略有不同与浏览器使用的字体引擎以及它如何计算/呈现字体有关)。