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

Question

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

我对 MDN 的理解是否错误，我是否可以期望所有现代浏览器都以与 Chrome 相同的方式工作？

为什么我问这个问题:

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

Answer 1

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

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

因此，可以放心地假设，无论 Canvas 上下文上的当前变换如何，您都会获得相同的字体大小。

而且很容易验证:

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);

在火狐浏览器中:

在 Blink 引擎中(此处为 Opera):

IE11:

等等。尽管应用了比例变换，大小仍然相等(浏览器之间的数字略有不同与浏览器使用的字体引擎及其计算/渲染字体的方式有关)。