Html 测量 html5 画布元素上的文本高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11452022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
measure text height on an html5 canvas element
提问by epeleg
I know I can use context.measureText to get the width of some text if it would now be rendered on the canvas. Is there a way to do the same but get the text's height?
我知道我可以使用 context.measureText 来获取某些文本的宽度，如果它现在可以在画布上呈现。有没有办法做同样的事情但获得文本的高度？
just a thought to myself - maybe I can rotate the text 90Deg and then test for the width ?...
只是对自己的一个想法 - 也许我可以将文本旋转 90Deg 然后测试宽度？...
回答by Michaelangel007
This SO answer is probably over-engineered for your needs How can you find the height of text on an HTML canvas?
这个 SO 答案可能是根据您的需要过度设计的 如何找到 HTML 画布上文本的高度？
I prefer something a little more simple:
我更喜欢更简单的东西：
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>Reference: http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html
参考：http: //www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html
回答by Manuel Choucino
I had the same issue and what I found is this. Get the font size from you string. I do not know why, but it only works when you set the proprety in PT, not PX.
我有同样的问题，我发现的是这个。从你的字符串中获取字体大小。我不知道为什么，但它仅在您在 PT 中设置属性时才有效，而不是在 PX 中。
ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.
Then take the value from it.
然后从中获取价值。
var txtHeight = parseInt(ctx.font);
Now you have the height for your texte. Like I said, in my side I had to set the size in PT as PX
现在你有文本的高度。就像我说的，在我这边，我必须将 PT 中的大小设置为 PX
回答by net.uk.sweet
You can set the font size of your canvas in pixels which you SHOULD then be able to use as the height of your text box. However, when I came to do this I found I needed to add approximately 50% to the pixel height to get an accurate value:
您可以以像素为单位设置画布的字体大小，然后您应该能够将其用作文本框的高度。然而，当我开始这样做时，我发现我需要将像素高度增加大约 50% 才能获得准确的值：
var textHeight = fontSize * 1.5;
If that's not good enough for you, there are a couple of pretty full-blown solutions outlined here, one of which uses the getImageDatamethod to count the number of vertical pixels.
如果这还不够好你，有几个非常全面的解决方案概述这里，其中一个使用getImageData方法计算垂直像素数。
