根据MDN，.measureText().width“包含CSS像素的文本超前宽度（该内联框的宽度）”，这意味着屏幕上的显示尺寸，这意味着如果我在画布上调用.scale(2,2)调用.measureText()，我将获得两倍的宽度。但是，我在Chrome上进行的测试表明，缩放画布时.measureText()不会改变。在我看来，只要我使用的字符串相同，即使我在不同的画布上调用该函数，.measureText()也会返回相同的内容。
我读错了MDN吗？我可以期望所有现代浏览器的工作方式与Chrome一样吗？
为什么我问这个问题：
我正在尝试使用屏幕外画布进行预渲染，但是屏幕外画布的宽度取决于我需要显示多少文本。因此，在创建离屏画布之前，最好在主画布上调用.measureText()。
最佳答案
CSS像素是实际物理像素之上的抽象像素大小/单位。如果将浏览器窗口缩放到200％，则定义为100px CSS像素的东西仍将是100px CSS像素，但它将占用200个物理像素。
因此，当结果以CSS像素形式返回时，意味着尺寸不受缩放等因素的影响。
因此，可以安全地假定您获得的字体大小相同，而与画布上下文上当前的转换无关。
而且很容易验证：
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中：
在闪烁引擎（此处为Opera）中：
IE11：
等等。尽管已应用了比例转换，但是大小是相等的（浏览器之间的数字略有不同，这与浏览器使用的字体引擎以及计算/渲染字体的方式有关）。
关于javascript - CanvasRenderingContext2D.measureText()是否随当前转换而改变？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42385798/