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

最佳答案

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

关于HTML5 Canvas : Why does measuring text with measureText and offsetWidth() give different values?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18713716/