我知道我可以使用 context.measureText 来获取一些文本的宽度，如果它现在将呈现在画布上。 有没有办法做同样的事情但得到文本的高度？
只是对自己的一个想法-也许我可以将文本旋转 90 度然后测试宽度？...
【问题讨论】：
标签： html text html5-canvas measurement
这个 SO 答案可能过度设计以满足您的需求 How can you find the height of text on an HTML canvas?
我更喜欢简单一点的：
var text = "Hello World";
var font = "Serif";
var size = "16";
var bold = false;
var div = document.createElement("div");
div.innerHTML = text;
div.style.position = 'absolute';
div.style.top = '-9999px';
div.style.left = '-9999px';
div.style.fontFamily = font;
div.style.fontWeight = bold ? 'bold' : 'normal';
div.style.fontSize = size + 'pt'; // or 'px'
document.body.appendChild(div);
var size = [ div.offsetWidth, div.offsetHeight ];
document.body.removeChild(div);
// Output
console.log( size );
var pre = document.getElementById( "output" );
if( pre )
pre.innerHTML = size;<pre id="output"></pre>参考： http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html
【讨论】：
<div> 中的 16px 字体与 <canvas> 中的 16px 字体大小相同，假设画布尚未缩放，因此，不，此答案中不需要画布。 @JorgeFuentesGonzález
measureText 是亚像素精度的，不像offsetWidth，所以不是完全相同的结果。第二：Chrome 不是 100% 的浏览器。前段时间，Microsoft Edge 在这方面遇到了一些问题。我猜现在 Chromium 与 Chrome 有完全相同的结果，但由于亚像素精度，结果仍然不一样（你不知道所有浏览器是如何实现这一点的，所以如果你要使用画布，用画布测量文本。这是避免实施问题的简单“良好做法”规则）。
我遇到了同样的问题，我发现的就是这个。 从您的字符串中获取字体大小。 我不知道为什么，但它只在你在 PT 中设置属性时才有效，而不是在 PX 中。
ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.
然后从中取值。
var txtHeight = parseInt(ctx.font);
现在您有了文本的高度。 就像我说的，在我这边，我必须将 PT 中的大小设置为 PX
【讨论】：
bold 40px verdana，因此parseInt 将失败...
您可以设置画布的字体大小（以像素为单位），然后您应该能够将其用作文本框的高度。然而，当我开始这样做时，我发现我需要在像素高度上增加大约 50% 才能获得准确的值：
var textHeight = fontSize * 1.5;
如果这对您来说还不够好，here 概述了几个非常成熟的解决方案，其中一个使用 getImageData 方法来计算垂直像素的数量。
【讨论】：