CanvasRenderingContext2D.measureText（）是否随当前转换而变化？

Question

根据MDN，.measureText().width＆＃34;包含CSS像素中文本的前进宽度（内联框的宽度）＆＃34;，表示显示大小为屏幕，这意味着如果我在调用.scale(2,2)之前在画布上调用.measureText()，我将获得两倍大的宽度。但是，我在Chrome上的测试表明，当我缩放画布时.measureText()不会改变。在我看来，.measureText()返回相同的东西，即使我在不​​同的画布上调用该函数，只要使用的字符串是相同的。

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

为什么我问这个问题：

我尝试使用离屏画布进行预渲染，但屏幕外画布的宽度取决于我需要显示多少文字。因此，在创建离屏画布之前，我最好在主画布上调用.measureText()。

Answer 1

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

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

因此，无论画布上下文上的当前转换如何，都可以安全地假设您将获得相同的字体大小。

它很容易验证：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在Firefox中：

在Blink引擎（这里是Opera）中：

IE11：

等等。尽管已经应用了比例变换，但是大小相等（浏览器之间的数字略有不同，与浏览器使用的字体引擎以及它如何计算/渲染字体有关。）