HTML5 Canvas:为什么用measureText和offsetWidth()测量文本会给出不同的值？

Question

我对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>

Answer 1

在大多数浏览器中,对context.measureText的支持非常糟糕.但是有一个hack可以让你更好地测量文本.<div>使用visibility: hidden(因此未呈现)创建HTML文档中的节点但不是display: none(因此占用空间).然后将其样式设置为您想要使用的相同样式context.fillText(请记住,当您使用外部字体时,必须完全加载该字体以获得准确的测量值),将文本放入div中,并检查div的.width

Answer 2

您需要在执行measureText之前在画布上下文中设置字体,否则您将获得上下文中的默认字体样式.您已经在hack div上设置了字体系列和大小,这就是它为您提供正确值的原因.

我所观察到的是,Chrome 34和Firefox 28都返回了92的宽度,但是IE10返回了95,Grrr.

Answer 3

帆布支持在过去不太准确.

截至2014年11月,大多数浏览器似乎工作正常.经过测试的Chrome,IE和Firefox.另请注意,大多数浏览器的Canvas.measureText功能甚至会产生子像素精度的结果.看到这个小提琴,以供参考.

为了省去编写自己的麻烦,您可能希望使用现有的字符串测量功能.