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

我知道我可以使用context.measureText获取某些文本的宽度(如果现在可以在画布上呈现该文本)。

有没有办法做到这一点，但要获得文本的高度？

只是对我自己的一个想法-也许我可以将文本旋转90Deg，然后测试宽度？...

在这里寻找一个好的答案：stackoverflow.com/questions/1134586/

我在这里发布了具有简单功能的解决方案-stackoverflow.com/a/36729322/1828637

如何找到HTML画布上文本高度的可能重复项？

我有同样的问题，发现的是这个。

从字符串中获取字体大小。

我不知道为什么，但是它仅在您在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将失败...

fontheight = parseInt(ctx.font.match(/ d + /)，10);

这样的答案可能是针对您的需求过度设计的

如何找到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;

[cc lang="text"]

code> pre>

参考：

http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html

画布在哪里？

您不需要度量标准的画布。

您可以设置画布的字体大小(以像素为单位)，然后可以将其用作文本框的高度。但是，当我这样做时，我发现需要将像素高度增加大约50％才能获得准确的值：

var textHeight = fontSize * 1.5;

如果这对您还不够好，那么这里概述了一些非常完善的解决方案，其中一种使用getImageData方法来计算垂直像素的数量。

这取决于字体类型，并且假定没有非常有趣的字符。