HTML5画布:为什么用measureText和offsetWidth()测量文本会给出不同的值？
我对offsetWidth()和measureText进行了基准测试，得到了截然不同的值。它们不应该是一样的吗？为什么它们是不同的？
下面是jsfiddle和原始代码：http://jsfiddle.net/WhGk7/2/
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<span id="visibilityHack" style="visibility: hidden; font: 15px Arial;">textAlign=start</span>
<div id="results"></div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
var measureTextWidth = ctx.measureText("textAlign=start").width;
var measureTextNode = document.createTextNode("measureTextWidth: " + measureTextWidth);
document.getElementById("results").appendChild(measureTextNode);
var swidth = document.getElementById("visibilityHack").offsetWidth;
var textnode = document.createTextNode(" offsetWidth: " + swidth);
document.getElementById("results").appendChild(textnode);
ctx.font="15px Arial";
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",117,60);
ctx.textAlign="center";
ctx.fillText("textAlign=start",150,120);
</script>回答 4
Stack Overflow用户
发布于 2013-09-10 16:19:27
在大多数浏览器中，对context.measureText的支持非常糟糕。但是有一个技巧可以让你对文本进行更好的测量。使用visibility: hidden在文档中创建一个<div>节点(这样就不会呈现它)，而不使用display: none (这样它就会占用空间)。然后将其样式设置为您想要用于context.fillText的样式(请记住，当您使用外部字体时，必须完全加载该字体才能获得准确的测量结果)，将文本放入div，并检查该div的.width
Stack Overflow用户
发布于 2014-04-15 03:07:21
在执行measureText之前，您需要在画布上下文上设置字体，否则您将获得上下文上的默认字体样式。您已经在hack div上设置了字体系列和大小，这就是为什么它会为您提供正确的值。
我观察到Chrome34和Firefox28的宽度都返回了92，但是IE10返回了95。
Stack Overflow用户
发布于 2014-11-28 14:20:36
在过去，Canvas支持不太准确。
截至2014年11月，大多数浏览器似乎都运行得很好。已测试Chrome、IE和Firefox。还要注意的是，大多数浏览器的Canvas.measureText函数甚至可以产生亚像素精度的结果。See this fiddle以供参考。
为了省去你自己写的麻烦，you might want to use an existing string-measuring function。
https://stackoverflow.com/questions/18713716
复制相似问题