测量html5 canvas元素上的文本高度

Question

我知道我可以使用context.measureText来获取某些文本的宽度,如果它现在将在画布上呈现.有没有办法做同样的但得到文本的高度？

只是想到了自己 - 也许我可以旋转文字90Deg,然后测试宽度？...

Answer 1

这个 SO 答案可能是根据您的需要过度设计的 如何找到 HTML 画布上文本的高度？

我更喜欢更简单的东西：

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

Answer 2

我有同样的问题，发现的是这个。从字符串中获取字体大小。我不知道为什么，但是它仅在您在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

Answer 3

您可以设置画布的字体大小（以像素为单位），然后您应该能够将其用作文本框的高度。然而，当我开始这样做时，我发现我需要将像素高度添加大约 50% 才能获得准确的值：

var textHeight = fontSize * 1.5;

如果这对您来说还不够好，这里概述了一些非常成熟的解决方案，其中之一使用该getImageData方法来计算垂直像素的数量。