blocks|key|1288897|text|画布规范没有给我们一种测量绳子高度的方法。但是，您可以以像素为单位设置文本的大小，并且通常可以相对容易地计算出垂直边界。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1288898|如果您需要更精确的内容，那么您可以将文本放到画布上，然后获取像素数据，并计算出垂直使用了多少像素。这将是相对简单的，但效率不是很高。你可以这样做(它可以工作，但是在你的画布上绘制一些你想要删除的文本)：|1288899|function+measureTextHeight(ctx,+left,+top,+width,+height)+{

++++//+Draw+the+text+in+the+specified+area
++++ctx.save();
++++ctx.translate(left,+top+%2B+Math.round(height+*+0.8));
++++ctx.mozDrawText('gM');+//+This+seems+like+tall+text...++Doesn't+it?
++++ctx.restore();

++++//+Get+the+pixel+data+from+the+canvas
++++var+data+=+ctx.getImageData(left,+top,+width,+height).data,
++++++++first+=+false,+
++++++++last+=+false,
++++++++r+=+height,
++++++++c+=+0;

++++//+Find+the+last+line+with+a+non-white+pixel
++++while(!last+&&+r)+{
++++++++r--;
++++++++for(c+=+0;+c+<+width;+c%2B%2B)+{
++++++++++++if(data[r+*+width+*+4+%2B+c+*+4+%2B+3])+{
++++++++++++++++last+=+r;
++++++++++++++++break;
++++++++++++}
++++++++}
++++}

++++//+Find+the+first+line+with+a+non-white+pixel
++++while(r)+{
++++++++r--;
++++++++for(c+=+0;+c+<+width;+c%2B%2B)+{
++++++++++++if(data[r+*+width+*+4+%2B+c+*+4+%2B+3])+{
++++++++++++++++first+=+r;
++++++++++++++++break;
++++++++++++}
++++++++}

++++++++//+If+we've+got+it+then+return+the+height
++++++++if(first+!=+r)+return+last+-+first;
++++}

++++//+We+screwed+something+up...++What+do+you+expect+from+free+code?
++++return+0;
}

//+Set+the+font
context.mozTextStyle+=+'32px+Arial';

//+Specify+a+context+and+a+rect+that+is+safe+to+draw+in+when+calling+measureTextHeight
var+height+=+measureTextHeight(context,+0,+0,+50,+50);
console.log(height);|code-block|syntax|javascript|1288900|对于Bespin，他们通过测量小写‘m’的宽度来伪造高度。我不知道这是如何使用的，我也不推荐使用这种方法。下面是相关的Bespin方法：|1288901|var+fixCanvas+=+function(ctx)+{
++++//+upgrade+Firefox+3.0.x+text+rendering+to+HTML+5+standard
++++if+(!ctx.fillText+&&+ctx.mozDrawText)+{
++++++++ctx.fillText+=+function(textToDraw,+x,+y,+maxWidth)+{
++++++++++++ctx.translate(x,+y);
++++++++++++ctx.mozTextStyle+=+ctx.font;
++++++++++++ctx.mozDrawText(textToDraw);
++++++++++++ctx.translate(-x,+-y);
++++++++}
++++}

++++if+(!ctx.measureText+&&+ctx.mozMeasureText)+{
++++++++ctx.measureText+=+function(text)+{
++++++++++++ctx.mozTextStyle+=+ctx.font;
++++++++++++var+width+=+ctx.mozMeasureText(text);
++++++++++++return+{+width:+width+};
++++++++}
++++}

++++if+(ctx.measureText+&&+!ctx.html5MeasureText)+{
++++++++ctx.html5MeasureText+=+ctx.measureText;
++++++++ctx.measureText+=+function(text)+{
++++++++++++var+textMetrics+=+ctx.html5MeasureText(text);

++++++++++++//+fake+it+'til+you+make+it
++++++++++++textMetrics.ascent+=+ctx.html5MeasureText("m").width;

++++++++++++return+textMetrics;
++++++++}
++++}

++++//+for+other+browsers
++++if+(!ctx.fillText)+{
++++++++ctx.fillText+=+function()+{}
++++}

++++if+(!ctx.measureText)+{
++++++++ctx.measureText+=+function()+{+return+10;+}
++++}
};|1288902|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The canvas spec doesn't give us a method for measuring the height of a string. However, you can set the size of your text in pixels and you can usually figure out what the vertical bounds are relatively easily.

If you need something more precise then you could throw text onto the canvas and then get pixel data and figure out how many pixels are used vertically. This would be relatively simple, but not very efficient. You could do something like this (it works, but draws some text onto your canvas that you would want to remove):

<pre><code>function measureTextHeight(ctx, left, top, width, height) {

 // Draw the text in the specified area
 ctx.save();
 ctx.translate(left, top + Math.round(height * 0.8));
 ctx.mozDrawText('gM'); // This seems like tall text... Doesn't it?
 ctx.restore();

 // Get the pixel data from the canvas
 var data = ctx.getImageData(left, top, width, height).data,
 first = false, 
 last = false,
 r = height,
 c = 0;

 // Find the last line with a non-white pixel
 while(!last &amp;&amp; r) {
 r--;
 for(c = 0; c &lt; width; c++) {
 if(data[r * width * 4 + c * 4 + 3]) {
 last = r;
 break;
 }
 }
 }

 // Find the first line with a non-white pixel
 while(r) {
 r--;
 for(c = 0; c &lt; width; c++) {
 if(data[r * width * 4 + c * 4 + 3]) {
 first = r;
 break;
 }
 }

 // If we've got it then return the height
 if(first != r) return last - first;
 }

 // We screwed something up... What do you expect from free code?
 return 0;
}

// Set the font
context.mozTextStyle = '32px Arial';

// Specify a context and a rect that is safe to draw in when calling measureTextHeight
var height = measureTextHeight(context, 0, 0, 50, 50);
console.log(height);
</code></pre>

For Bespin they do fake a height by measuring the width of a lowercase 'm'... I don't know how this is used, and I would not recommend this method. Here is the relevant Bespin method:

<pre><code>var fixCanvas = function(ctx) {
 // upgrade Firefox 3.0.x text rendering to HTML 5 standard
 if (!ctx.fillText &amp;&amp; ctx.mozDrawText) {
 ctx.fillText = function(textToDraw, x, y, maxWidth) {
 ctx.translate(x, y);
 ctx.mozTextStyle = ctx.font;
 ctx.mozDrawText(textToDraw);
 ctx.translate(-x, -y);
 }
 }

 if (!ctx.measureText &amp;&amp; ctx.mozMeasureText) {
 ctx.measureText = function(text) {
 ctx.mozTextStyle = ctx.font;
 var width = ctx.mozMeasureText(text);
 return { width: width };
 }
 }

 if (ctx.measureText &amp;&amp; !ctx.html5MeasureText) {
 ctx.html5MeasureText = ctx.measureText;
 ctx.measureText = function(text) {
 var textMetrics = ctx.html5MeasureText(text);

 // fake it 'til you make it
 textMetrics.ascent = ctx.html5MeasureText("m").width;

 return textMetrics;
 }
 }

 // for other browsers
 if (!ctx.fillText) {
 ctx.fillText = function() {}
 }

 if (!ctx.measureText) {
 ctx.measureText = function() { return 10; }
 }
};
</code></pre>

blocks|key|1289038|text|设置字体大小可能并不实用，因为设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289039|ctx.font+=+'‘|1289040|将使用CSS定义的字体标签以及任何嵌入的字体标签。如果你使用CSS字体，你不知道高度是多少从编程的方式，使用measureText方法，这是非常短视的。但从另一方面来说，IE8确实返回了宽度和高度。|1289041|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

setting the font size might not be practical though, since setting

ctx.font = ''

will use the one defined by CSS as well as any embedded font tags. If you use the CSS font you have no idea what the height is from a programmatic way, using the measureText method, which is very short sighted. On another note though, IE8 DOES return the width and height.

blocks|key|1503785|text|我正在写一个终端模拟器，所以我需要在字符周围画矩形。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1503786|var+size+=+10
var+lineHeight+=+1.2+//+CSS+"line-height:+normal"+is+between+1+and+1.2
context.font+=+size%2B'px/'%2BlineHeight%2B'em+monospace'
width+=+context.measureText('m').width
height+=+size+*+lineHeight|code-block|syntax|javascript|1503787|显然，如果你想要角色所占空间的确切大小，这是没有帮助的。但对于某些用途，它会给你一个很好的近似值。|1503788|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I'm writing a terminal emulator so I needed to draw rectangles around characters.

<pre><code>var size = 10
var lineHeight = 1.2 // CSS "line-height: normal" is between 1 and 1.2
context.font = size+'px/'+lineHeight+'em monospace'
width = context.measureText('m').width
height = size * lineHeight
</code></pre>

Obviously if you want the exact amount of space the character takes up, it won't help. But it'll give you a good approximation for certain uses.

blocks|key|1503845|text|有趣的是，TextMetrics只有宽度，没有高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1503846|http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics|offset|length|1503847|你能像这个例子一样使用Span吗？|1503848|http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix|1503849|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|2N|0|0|0|0|1V|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

Funny that TextMetrics has width only and no height:

<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics" rel="nofollow">http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics</a>

Can you use a Span as on this example?

<a href="http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix" rel="nofollow">http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix</a>

blocks|key|1289199|text|正如JJ+Stiff建议的那样，您可以将文本添加到范围中，然后测量该范围的offsetHeight。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289200|var+d+=+document.createElement("span");
d.font+=+"20px+arial";
d.textContent+=+"Hello+world!";
document.body.appendChild(d);
var+emHeight+=+d.offsetHeight;
document.body.removeChild(d);|code-block|syntax|javascript|1289201|如HTML5Rocks所示|offset|length|1289202|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/canvas/texteffects/#toc-text-shadow-clipping^0|0|0|1|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

As JJ Stiff suggests, you can add your text to a span and then measure the offsetHeight of the span.

<pre><code>var d = document.createElement("span");
d.font = "20px arial";
d.textContent = "Hello world!";
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);
</code></pre>

As shown on <a href="http://www.html5rocks.com/en/tutorials/canvas/texteffects/#toc-text-shadow-clipping" rel="noreferrer">HTML5Rocks</a>

blocks|key|1289291|text|如果您使用context.font定义字体，以像素为单位的文本高度是否等于字体大小(以pt为单位)？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289292|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Isn't the height of the text in pixels equal to the font size (in pts) if you define the font using context.font ?

blocks|key|1289339|text|通过检查大写字母M的长度，可以得到与垂直高度非常接近的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289340|ctx.font+=+'bold+10px+Arial';

lineHeight+=+ctx.measureText('M').width;|code-block|syntax|javascript|1289341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can get a very close approximation of the vertical height by checking the length of a capital M.
<pre><code>ctx.font = 'bold 10px Arial';

lineHeight = ctx.measureText('M').width;
</code></pre>

blocks|key|1504117|text|我直接解决了这个问题--使用像素操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504118|以下是图形化的答案：|1504119|​|1504120|📷|atomic|offset|length|1504121|1504122|下面是代码：|1504123|++++function+textHeight+(text,+font)+{

++++var+fontDraw+=+document.createElement("canvas");

++++var+height+=+100;
++++var+width+=+100;

++++//+here+we+expect+that+font+size+will+be+less+canvas+geometry
++++fontDraw.setAttribute("height",+height);
++++fontDraw.setAttribute("width",+width);

++++var+ctx+=+fontDraw.getContext('2d');
++++//+black+is+default
++++ctx.fillRect(0,+0,+width,+height);
++++ctx.textBaseline+=+'top';
++++ctx.fillStyle+=+'white';
++++ctx.font+=+font;
++++ctx.fillText(text/*'Eg'*/,+0,+0);

++++var+pixels+=+ctx.getImageData(0,+0,+width,+height).data;

++++//+row+numbers+where+we+first+find+letter+end+where+it+ends+
++++var+start+=+-1;
++++var+end+=+-1;

++++for+(var+row+=+0;+row+<+height;+row%2B%2B)+{
++++++++for+(var+column+=+0;+column+<+width;+column%2B%2B)+{

++++++++++++var+index+=+(row+*+width+%2B+column)+*+4;

++++++++++++//+if+pixel+is+not+white+(background+color)
++++++++++++if+(pixels[index]+==+0)+{
++++++++++++++++//+we+havent+met+white+(font+color)+pixel
++++++++++++++++//+on+the+row+and+the+letters+was+detected
++++++++++++++++if+(column+==+width+-+1+&&+start+!=+-1)+{
++++++++++++++++++++end+=+row;
++++++++++++++++++++row+=+height;
++++++++++++++++++++break;
++++++++++++++++}
++++++++++++++++continue;
++++++++++++}
++++++++++++else+{
++++++++++++++++//+we+find+top+of+letter
++++++++++++++++if+(start+==+-1)+{
++++++++++++++++++++start+=+row;
++++++++++++++++}
++++++++++++++++//+..letters+body
++++++++++++++++break;
++++++++++++}

++++++++}

++++}
+++/*
++++document.body.appendChild(fontDraw);
++++fontDraw.style.pixelLeft+=+400;
++++fontDraw.style.pixelTop+=+400;
++++fontDraw.style.position+=+"absolute";
+++*/

++++return+end+-+start;

}|code-block|syntax|javascript|1504124|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/050b69a6c060dbcfc70160a8a3e5962c.png|imageAlt^0|0|0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1A|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

I solved this problem straitforward - using pixel manipulation.

Here is graphical answer:

<img src="https://i.stack.imgur.com/mSH1c.png" alt="">

Here is code:

<pre><code> function textHeight (text, font) {

 var fontDraw = document.createElement("canvas");

 var height = 100;
 var width = 100;

 // here we expect that font size will be less canvas geometry
 fontDraw.setAttribute("height", height);
 fontDraw.setAttribute("width", width);

 var ctx = fontDraw.getContext('2d');
 // black is default
 ctx.fillRect(0, 0, width, height);
 ctx.textBaseline = 'top';
 ctx.fillStyle = 'white';
 ctx.font = font;
 ctx.fillText(text/*'Eg'*/, 0, 0);

 var pixels = ctx.getImageData(0, 0, width, height).data;

 // row numbers where we first find letter end where it ends 
 var start = -1;
 var end = -1;

 for (var row = 0; row &lt; height; row++) {
 for (var column = 0; column &lt; width; column++) {

 var index = (row * width + column) * 4;

 // if pixel is not white (background color)
 if (pixels[index] == 0) {
 // we havent met white (font color) pixel
 // on the row and the letters was detected
 if (column == width - 1 &amp;&amp; start != -1) {
 end = row;
 row = height;
 break;
 }
 continue;
 }
 else {
 // we find top of letter
 if (start == -1) {
 start = row;
 }
 // ..letters body
 break;
 }

 }

 }
 /*
 document.body.appendChild(fontDraw);
 fontDraw.style.pixelLeft = 400;
 fontDraw.style.pixelTop = 400;
 fontDraw.style.position = "absolute";
 */

 return end - start;

}
</code></pre>

blocks|key|1289558|text|这是疯狂的..。文本的高度是字体大小。你们中有没有人读过文档？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289559|context.font+=+"22px+arial";|code-block|syntax|javascript|1289560|这会将高度设置为22px。|1289561|唯一的原因是..。|1289562|context.measureText(string).width|1289563|是因为字符串的宽度是无法确定的，除非它知道您想要的字符串的宽度，而不是所有用字体绘制的字符串。高度将是22px。|1289564|如果你使用px以外的其他测量值，那么高度仍然是相同的，但是使用该测量值，所以最多你需要做的就是转换测量值。|1289565|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

This is madding... The height of the text is the font size.. Didn't any of you read the documentation?

<pre><code>context.font = "22px arial";
</code></pre>

this will set the height to 22px.

the only reason there is a..

<pre><code>context.measureText(string).width
</code></pre>

is because that the width of the string can not be determined unless it knows the string you want the width of but for all the strings drawn with the font.. the height will be 22px.

if you use another measurement than px then the height will still be the same but with that measurement so at most all you would have to do is convert the measurement.

blocks|key|1289610|text|在正常情况下，以下操作应该有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289611|var+can+=+CanvasElement.getContext('2d');++++++++++//get+context
var+lineHeight+=+/[0-9]%2B(?=pt%7Cpx)/.exec(can.font);+//get+height+from+font+variable|code-block|syntax|javascript|1289612|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In normal situations the following should work:

<pre><code>var can = CanvasElement.getContext('2d'); //get context
var lineHeight = /[0-9]+(?=pt|px)/.exec(can.font); //get height from font variable
</code></pre>

blocks|key|1504314|text|我已经实现了一个很好的库，用于使用HTML+canvas测量文本的确切高度和宽度。这应该可以做你想要的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504315|https://github.com/ChrisBellew/text-measurer.js|offset|length|1504316|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

I have implemented a nice library for measuring the exact height and width of text using HTML canvas. This should do what you want.

<a href="https://github.com/ChrisBellew/text-measurer.js" rel="nofollow">https://github.com/ChrisBellew/text-measurer.js</a>

blocks|key|1290360|text|下面是一个简单的函数。不需要库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290361|我写这个函数是为了得到相对于基线的上下限。如果textBaseline设置为alphabetic。它所做的是创建另一个画布，然后在那里绘制，然后找到最顶部和最底部的非空白像素。这是上界和下界。它将其作为相对值返回，因此如果height为20px，并且基线以下没有任何内容，则上限为-20。|offset|length|style|CODE|1290362|您必须为其提供字符。否则，很明显它会给你0的高度和0的宽度。|1290363|用法：|1290364|alert(measureHeight('40px+serif',+40,+'rg').height)|code-block|syntax|javascript|1290365|下面是函数：|1290366|function+measureHeight(aFont,+aSize,+aChars,+aOptions={})+{
++++//+if+you+do+pass+aOptions.ctx,+keep+in+mind+that+the+ctx+properties+will+be+changed+and+not+set+back.+so+you+should+have+a+devoted+canvas+for+this
++++//+if+you+dont+pass+in+a+width+to+aOptions,+it+will+return+it+to+you+in+the+return+object
++++//+the+returned+width+is+Math.ceil'ed
++++console.error('aChars:+"'+%2B+aChars+%2B+'"');
++++var+defaultOptions+=+{
++++++++width:+undefined,+//+if+you+specify+a+width+then+i+wont+have+to+use+measureText+to+get+the+width
++++++++canAndCtx:+undefined,+//+set+it+to+object+{can:,ctx:}+//+if+not+provided,+i+will+make+one
++++++++range:+3
++++};

++++aOptions.range+=+aOptions.range+%7C%7C+3;+//+multiples+the+aSize+by+this+much

++++if+(aChars+===+'')+{
++++++++//+no+characters,+so+obviously+everything+is+0
++++++++return+{
++++++++++++relativeBot:+0,
++++++++++++relativeTop:+0,
++++++++++++height:+0,
++++++++++++width:+0
++++++++};
++++++++//+otherwise+i+will+get+IndexSizeError:+Index+or+size+is+negative+or+greater+than+the+allowed+amount+error+somewhere+below
++++}

++++//+validateOptionsObj(aOptions,+defaultOptions);+//+not+needed+because+all+defaults+are+undefined

++++var+can;
++++var+ctx;+
++++if+(!aOptions.canAndCtx)+{
++++++++can+=+document.createElement('canvas');;
++++++++can.mozOpaque+=+'true';+//+improved+performanceo+on+firefox+i+guess
++++++++ctx+=+can.getContext('2d');

++++++++//+can.style.position+=+'absolute';
++++++++//+can.style.zIndex+=+10000;
++++++++//+can.style.left+=+0;
++++++++//+can.style.top+=+0;
++++++++//+document.body.appendChild(can);
++++}+else+{
++++++++can+=+aOptions.canAndCtx.can;
++++++++ctx+=+aOptions.canAndCtx.ctx;
++++}

++++var+w+=+aOptions.width;
++++if+(!w)+{
++++++++ctx.textBaseline+=+'alphabetic';
++++++++ctx.textAlign+=+'left';+
++++++++ctx.font+=+aFont;
++++++++w+=+ctx.measureText(aChars).width;
++++}

++++w+=+Math.ceil(w);+//+needed+as+i+use+w+in+the+calc+for+the+loop,+it+needs+to+be+a+whole+number

++++//+must+set+width/height,+as+it+wont+paint+outside+of+the+bounds
++++can.width+=+w;
++++can.height+=+aSize+*+aOptions.range;

++++ctx.font+=+aFont;+//+need+to+set+the+.font+again,+because+after+changing+width/height+it+makes+it+forget+for+some+reason
++++ctx.textBaseline+=+'alphabetic';
++++ctx.textAlign+=+'left';+

++++ctx.fillStyle+=+'white';

++++console.log('w:',+w);

++++var+avgOfRange+=+(aOptions.range+%2B+1)+/+2;
++++var+yBaseline+=+Math.ceil(aSize+*+avgOfRange);
++++console.log('yBaseline:',+yBaseline);

++++ctx.fillText(aChars,+0,+yBaseline);

++++var+yEnd+=+aSize+*+aOptions.range;

++++var+data+=+ctx.getImageData(0,+0,+w,+yEnd).data;
++++//+console.log('data:',+data)

++++var+botBound+=+-1;
++++var+topBound+=+-1;

++++//+measureHeightY:
++++for+(y=0;+y<=yEnd;+y%2B%2B)+{
++++++++for+(var+x+=+0;+x+<+w;+x+%2B=+1)+{
++++++++++++var+n+=+4+*+(w+*+y+%2B+x);
++++++++++++var+r+=+data[n];
++++++++++++var+g+=+data[n+%2B+1];
++++++++++++var+b+=+data[n+%2B+2];
++++++++++++//+var+a+=+data[n+%2B+3];

++++++++++++if+(r%2Bg%2Bb+>+0)+{+//+non+black+px+found
++++++++++++++++if+(topBound+==+-1)+{+
++++++++++++++++++++topBound+=+y;
++++++++++++++++}
++++++++++++++++botBound+=+y;+//+break+measureHeightY;+//+dont+break+measureHeightY+ever,+keep+going,+we+till+yEnd.+so+we+get+proper+height+for+strings+like+"`."+or+":"+or+"!"
++++++++++++++++break;
++++++++++++}
++++++++}
++++}

++++return+{
++++++++relativeBot:+botBound+-+yBaseline,+//+relative+to+baseline+of+0+//+bottom+most+row+having+non-black
++++++++relativeTop:+topBound+-+yBaseline,+//+relative+to+baseline+of+0+//+top+most+row+having+non-black
++++++++height:+(botBound+-+topBound)+%2B+1,
++++++++width:+w//+EDIT:+comma+has+been+added+to+fix+old+broken+code.
++++};
}|1290367|relativeBot、relativeTop和height是返回对象中的有用内容。|1290368|示例用法如下：|1290369|​|1290370|<!DOCTYPE+html>
<html>
<head>
<title>Page+Title</title>
<script>
function+measureHeight(aFont,+aSize,+aChars,+aOptions={})+{
	//+if+you+do+pass+aOptions.ctx,+keep+in+mind+that+the+ctx+properties+will+be+changed+and+not+set+back.+so+you+should+have+a+devoted+canvas+for+this
	//+if+you+dont+pass+in+a+width+to+aOptions,+it+will+return+it+to+you+in+the+return+object
	//+the+returned+width+is+Math.ceil'ed
	console.error('aChars:+"'+%2B+aChars+%2B+'"');
	var+defaultOptions+=+{
		width:+undefined,+//+if+you+specify+a+width+then+i+wont+have+to+use+measureText+to+get+the+width
		canAndCtx:+undefined,+//+set+it+to+object+{can:,ctx:}+//+if+not+provided,+i+will+make+one
		range:+3
	};
	
	aOptions.range+=+aOptions.range+%7C%7C+3;+//+multiples+the+aSize+by+this+much
	
	if+(aChars+===+'')+{
		//+no+characters,+so+obviously+everything+is+0
		return+{
			relativeBot:+0,
			relativeTop:+0,
			height:+0,
			width:+0
		};
		//+otherwise+i+will+get+IndexSizeError:+Index+or+size+is+negative+or+greater+than+the+allowed+amount+error+somewhere+below
	}
	
	//+validateOptionsObj(aOptions,+defaultOptions);+//+not+needed+because+all+defaults+are+undefined
	
	var+can;
	var+ctx;+
	if+(!aOptions.canAndCtx)+{
		can+=+document.createElement('canvas');;
		can.mozOpaque+=+'true';+//+improved+performanceo+on+firefox+i+guess
		ctx+=+can.getContext('2d');
		
		//+can.style.position+=+'absolute';
		//+can.style.zIndex+=+10000;
		//+can.style.left+=+0;
		//+can.style.top+=+0;
		//+document.body.appendChild(can);
	}+else+{
		can+=+aOptions.canAndCtx.can;
		ctx+=+aOptions.canAndCtx.ctx;
	}
	
	var+w+=+aOptions.width;
	if+(!w)+{
		ctx.textBaseline+=+'alphabetic';
		ctx.textAlign+=+'left';	
		ctx.font+=+aFont;
		w+=+ctx.measureText(aChars).width;
	}
	
	w+=+Math.ceil(w);+//+needed+as+i+use+w+in+the+calc+for+the+loop,+it+needs+to+be+a+whole+number
	
	//+must+set+width/height,+as+it+wont+paint+outside+of+the+bounds
	can.width+=+w;
	can.height+=+aSize+*+aOptions.range;
	
	ctx.font+=+aFont;+//+need+to+set+the+.font+again,+because+after+changing+width/height+it+makes+it+forget+for+some+reason
	ctx.textBaseline+=+'alphabetic';
	ctx.textAlign+=+'left';	
	
	ctx.fillStyle+=+'white';
	
	console.log('w:',+w);
	
	var+avgOfRange+=+(aOptions.range+%2B+1)+/+2;
	var+yBaseline+=+Math.ceil(aSize+*+avgOfRange);
	console.log('yBaseline:',+yBaseline);
	
	ctx.fillText(aChars,+0,+yBaseline);
	
	var+yEnd+=+aSize+*+aOptions.range;
	
	var+data+=+ctx.getImageData(0,+0,+w,+yEnd).data;
	//+console.log('data:',+data)
	
	var+botBound+=+-1;
	var+topBound+=+-1;
	
	//+measureHeightY:
	for+(y=0;+y<=yEnd;+y%2B%2B)+{
		for+(var+x+=+0;+x+<+w;+x+%2B=+1)+{
			var+n+=+4+*+(w+*+y+%2B+x);
			var+r+=+data[n];
			var+g+=+data[n+%2B+1];
			var+b+=+data[n+%2B+2];
			//+var+a+=+data[n+%2B+3];
			
			if+(r%2Bg%2Bb+>+0)+{+//+non+black+px+found
				if+(topBound+==+-1)+{+
					topBound+=+y;
				}
				botBound+=+y;+//+break+measureHeightY;+//+dont+break+measureHeightY+ever,+keep+going,+we+till+yEnd.+so+we+get+proper+height+for+strings+like+"`."+or+":"+or+"!"
				break;
			}
		}
	}
	
	return+{
		relativeBot:+botBound+-+yBaseline,+//+relative+to+baseline+of+0+//+bottom+most+row+having+non-black
		relativeTop:+topBound+-+yBaseline,+//+relative+to+baseline+of+0+//+top+most+row+having+non-black
		height:+(botBound+-+topBound)+%2B+1,
		width:+w
	};
}

</script>
</head>
<body+style="background-color:steelblue;">
<input+type="button"+value="reuse+can"+onClick="alert(measureHeight('40px+serif',+40,+'rg',+{canAndCtx:{can:document.getElementById('can'),+ctx:document.getElementById('can').getContext('2d')}}).height)">
<input+type="button"+value="dont+reuse+can"+onClick="alert(measureHeight('40px+serif',+40,+'rg').height)">
<canvas+id="can"></canvas>
<h1>This+is+a+Heading</h1>
This+is+a+paragraph.
</body>
</html>|1290371|1290372|relativeBot和relativeTop是您在此图中看到的内容：|1290373|https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text|1290374|1290375|📷|atomic|1290376|1290377|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/32afe92c8dbbde83dc7eb6fa0b7f8471.png|imageAlt^0|0|N|C|12|A|3W|3|0|0|0|0|0|0|0|B|C|B|O|6|0|0|0|0|0|0|B|C|B|0|0|29|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Q|8|@$D|1R|E|1S|F|G]|$D|1T|E|1U|F|G]|$D|1V|E|1W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1X|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1Z|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|20|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|21|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|22|8|@$D|23|E|24|F|G]|$D|25|E|26|F|G]|$D|27|E|28|F|G]]|9|@]|A|$]]|$1|W|3|X|5|6|7|29|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2A|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|2B|8|@]|9|@]|A|$O|P]]|$1|12|3|Z|5|6|7|2C|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2D|8|@$D|2E|E|2F|F|G]|$D|2G|E|2H|F|G]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2I|8|@]|9|@$D|2J|E|2K|1|2L]]|A|$]]|$1|17|3|Z|5|6|7|2M|8|@]|9|@]|A|$]]|$1|18|3|19|5|1A|7|2N|8|@]|9|@$D|2O|E|2P|1|2Q]]|A|$]]|$1|1B|3|Z|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|2S|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|16]]|1J|$5|1K|1G|1L|A|$1M|1N|1O|-4]]]]

Here is a simple function. No library needed.

I wrote this function to get the top and bottom bounds relative to baseline. If <code>textBaseline</code> is set to <code>alphabetic</code>. What it does is it creates another canvas, and then draws there, and then finds the top most and bottom most non blank pixel. And that is the top and bottom bounds. It returns it as relative, so if height is 20px, and there is nothing below the baseline, then the top bound is <code>-20</code>.

You must supply characters to it. Otherwise it will give you 0 height and 0 width, obviously.

Usage: 

<pre><code>alert(measureHeight('40px serif', 40, 'rg').height)
</code></pre>

Here is the function:

<pre><code>function measureHeight(aFont, aSize, aChars, aOptions={}) {
 // if you do pass aOptions.ctx, keep in mind that the ctx properties will be changed and not set back. so you should have a devoted canvas for this
 // if you dont pass in a width to aOptions, it will return it to you in the return object
 // the returned width is Math.ceil'ed
 console.error('aChars: "' + aChars + '"');
 var defaultOptions = {
 width: undefined, // if you specify a width then i wont have to use measureText to get the width
 canAndCtx: undefined, // set it to object {can:,ctx:} // if not provided, i will make one
 range: 3
 };

 aOptions.range = aOptions.range || 3; // multiples the aSize by this much

 if (aChars === '') {
 // no characters, so obviously everything is 0
 return {
 relativeBot: 0,
 relativeTop: 0,
 height: 0,
 width: 0
 };
 // otherwise i will get IndexSizeError: Index or size is negative or greater than the allowed amount error somewhere below
 }

 // validateOptionsObj(aOptions, defaultOptions); // not needed because all defaults are undefined

 var can;
 var ctx; 
 if (!aOptions.canAndCtx) {
 can = document.createElement('canvas');;
 can.mozOpaque = 'true'; // improved performanceo on firefox i guess
 ctx = can.getContext('2d');

 // can.style.position = 'absolute';
 // can.style.zIndex = 10000;
 // can.style.left = 0;
 // can.style.top = 0;
 // document.body.appendChild(can);
 } else {
 can = aOptions.canAndCtx.can;
 ctx = aOptions.canAndCtx.ctx;
 }

 var w = aOptions.width;
 if (!w) {
 ctx.textBaseline = 'alphabetic';
 ctx.textAlign = 'left'; 
 ctx.font = aFont;
 w = ctx.measureText(aChars).width;
 }

 w = Math.ceil(w); // needed as i use w in the calc for the loop, it needs to be a whole number

 // must set width/height, as it wont paint outside of the bounds
 can.width = w;
 can.height = aSize * aOptions.range;

 ctx.font = aFont; // need to set the .font again, because after changing width/height it makes it forget for some reason
 ctx.textBaseline = 'alphabetic';
 ctx.textAlign = 'left'; 

 ctx.fillStyle = 'white';

 console.log('w:', w);

 var avgOfRange = (aOptions.range + 1) / 2;
 var yBaseline = Math.ceil(aSize * avgOfRange);
 console.log('yBaseline:', yBaseline);

 ctx.fillText(aChars, 0, yBaseline);

 var yEnd = aSize * aOptions.range;

 var data = ctx.getImageData(0, 0, w, yEnd).data;
 // console.log('data:', data)

 var botBound = -1;
 var topBound = -1;

 // measureHeightY:
 for (y=0; y&lt;=yEnd; y++) {
 for (var x = 0; x &lt; w; x += 1) {
 var n = 4 * (w * y + x);
 var r = data[n];
 var g = data[n + 1];
 var b = data[n + 2];
 // var a = data[n + 3];

 if (r+g+b &gt; 0) { // non black px found
 if (topBound == -1) { 
 topBound = y;
 }
 botBound = y; // break measureHeightY; // dont break measureHeightY ever, keep going, we till yEnd. so we get proper height for strings like "`." or ":" or "!"
 break;
 }
 }
 }

 return {
 relativeBot: botBound - yBaseline, // relative to baseline of 0 // bottom most row having non-black
 relativeTop: topBound - yBaseline, // relative to baseline of 0 // top most row having non-black
 height: (botBound - topBound) + 1,
 width: w// EDIT: comma has been added to fix old broken code.
 };
}
</code></pre>

<code>relativeBot</code>, <code>relativeTop</code>, and <code>height</code> are the useful things in the return object.

Here is example usage:

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;script&gt;
function measureHeight(aFont, aSize, aChars, aOptions={}) {
	// if you do pass aOptions.ctx, keep in mind that the ctx properties will be changed and not set back. so you should have a devoted canvas for this
	// if you dont pass in a width to aOptions, it will return it to you in the return object
	// the returned width is Math.ceil'ed
	console.error('aChars: "' + aChars + '"');
	var defaultOptions = {
		width: undefined, // if you specify a width then i wont have to use measureText to get the width
		canAndCtx: undefined, // set it to object {can:,ctx:} // if not provided, i will make one
		range: 3
	};
	
	aOptions.range = aOptions.range || 3; // multiples the aSize by this much
	
	if (aChars === '') {
		// no characters, so obviously everything is 0
		return {
			relativeBot: 0,
			relativeTop: 0,
			height: 0,
			width: 0
		};
		// otherwise i will get IndexSizeError: Index or size is negative or greater than the allowed amount error somewhere below
	}
	
	// validateOptionsObj(aOptions, defaultOptions); // not needed because all defaults are undefined
	
	var can;
	var ctx; 
	if (!aOptions.canAndCtx) {
		can = document.createElement('canvas');;
		can.mozOpaque = 'true'; // improved performanceo on firefox i guess
		ctx = can.getContext('2d');
		
		// can.style.position = 'absolute';
		// can.style.zIndex = 10000;
		// can.style.left = 0;
		// can.style.top = 0;
		// document.body.appendChild(can);
	} else {
		can = aOptions.canAndCtx.can;
		ctx = aOptions.canAndCtx.ctx;
	}
	
	var w = aOptions.width;
	if (!w) {
		ctx.textBaseline = 'alphabetic';
		ctx.textAlign = 'left';	
		ctx.font = aFont;
		w = ctx.measureText(aChars).width;
	}
	
	w = Math.ceil(w); // needed as i use w in the calc for the loop, it needs to be a whole number
	
	// must set width/height, as it wont paint outside of the bounds
	can.width = w;
	can.height = aSize * aOptions.range;
	
	ctx.font = aFont; // need to set the .font again, because after changing width/height it makes it forget for some reason
	ctx.textBaseline = 'alphabetic';
	ctx.textAlign = 'left';	
	
	ctx.fillStyle = 'white';
	
	console.log('w:', w);
	
	var avgOfRange = (aOptions.range + 1) / 2;
	var yBaseline = Math.ceil(aSize * avgOfRange);
	console.log('yBaseline:', yBaseline);
	
	ctx.fillText(aChars, 0, yBaseline);
	
	var yEnd = aSize * aOptions.range;
	
	var data = ctx.getImageData(0, 0, w, yEnd).data;
	// console.log('data:', data)
	
	var botBound = -1;
	var topBound = -1;
	
	// measureHeightY:
	for (y=0; y&lt;=yEnd; y++) {
		for (var x = 0; x &lt; w; x += 1) {
			var n = 4 * (w * y + x);
			var r = data[n];
			var g = data[n + 1];
			var b = data[n + 2];
			// var a = data[n + 3];
			
			if (r+g+b &gt; 0) { // non black px found
				if (topBound == -1) { 
					topBound = y;
				}
				botBound = y; // break measureHeightY; // dont break measureHeightY ever, keep going, we till yEnd. so we get proper height for strings like "`." or ":" or "!"
				break;
			}
		}
	}
	
	return {
		relativeBot: botBound - yBaseline, // relative to baseline of 0 // bottom most row having non-black
		relativeTop: topBound - yBaseline, // relative to baseline of 0 // top most row having non-black
		height: (botBound - topBound) + 1,
		width: w
	};
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body style="background-color:steelblue;"&gt;
&lt;input type="button" value="reuse can" onClick="alert(measureHeight('40px serif', 40, 'rg', {canAndCtx:{can:document.getElementById('can'), ctx:document.getElementById('can').getContext('2d')}}).height)"&gt;
&lt;input type="button" value="dont reuse can" onClick="alert(measureHeight('40px serif', 40, 'rg').height)"&gt;
&lt;canvas id="can"&gt;&lt;/canvas&gt;
&lt;h1&gt;This is a Heading&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>


The <code>relativeBot</code> and <code>relativeTop</code> are what you see in this image here:

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text</a>

<img src="https://www.whatwg.org/specs/web-apps/current-work/images/baselines.png" alt="">

blocks|key|1290442|text|首先，你需要设置一个字体的高度大小，然后根据字体高度的值来确定你当前的文本高度是多少，交叉文本行，当然，同样的字体高度也需要累加，如果文本没有超过文本框的最大高度，则全部显示，否则，只显示文本框内的文本。高值需要你自己的定义。预设高度越大，需要显示和截取的文本的高度就越大。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290443|After+the+effect+is+processed(solve)|offset|length|1290444|Before+the+effect+is+processed(+unsolved)|1290445|++AutoWrappedText.auto_wrap+=+function(ctx,+text,+maxWidth,+maxHeight)+{
var+words+=+text.split("");
var+lines+=+[];
var+currentLine+=+words[0];

var+total_height+=+0;
for+(var+i+=+1;+i+<+words.length;+i%2B%2B)+{
++++var+word+=+words[i];
++++var+width+=+ctx.measureText(currentLine+%2B+word).width;
++++if+(width+<+maxWidth)+{
++++++++currentLine+%2B=+word;
++++}+else+{
++++++++lines.push(currentLine);
++++++++currentLine+=+word;
++++++++//+TODO+dynamically+get+font+size
++++++++total_height+%2B=+25;

++++++++if+(total_height+>=+maxHeight)+{
++++++++++break
++++++++}
++++}
}
if+(total_height+%2B+25+<+maxHeight)+{
++lines.push(currentLine);
}+else+{
++lines[lines.length+-+1]+%2B=+"…";
}
return+lines;};|code-block|syntax|javascript|1290446|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/9kMcX.png|1|https://i.stack.imgur.com/HWar4.png^0|0|0|10|0|0|0|15|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

First of all, you need to set the height of a font size, and then according to the value of the font height to determine the current height of your text is how much, cross-text lines, of course, the same height of the font need to accumulate, if the text does not exceed the largest text box Height, all show, otherwise, only show the text within the box text. High values need your own definition. The larger the preset height, the greater the height of the text that needs to be displayed and intercepted.

<a href="https://i.stack.imgur.com/9kMcX.png" rel="nofollow noreferrer">After the effect is processed(solve)</a>

<a href="https://i.stack.imgur.com/HWar4.png" rel="nofollow noreferrer">Before the effect is processed(
unsolved)</a>

<pre><code> AutoWrappedText.auto_wrap = function(ctx, text, maxWidth, maxHeight) {
var words = text.split("");
var lines = [];
var currentLine = words[0];

var total_height = 0;
for (var i = 1; i &lt; words.length; i++) {
 var word = words[i];
 var width = ctx.measureText(currentLine + word).width;
 if (width &lt; maxWidth) {
 currentLine += word;
 } else {
 lines.push(currentLine);
 currentLine = word;
 // TODO dynamically get font size
 total_height += 25;

 if (total_height &gt;= maxHeight) {
 break
 }
 }
}
if (total_height + 25 &lt; maxHeight) {
 lines.push(currentLine);
} else {
 lines[lines.length - 1] += "…";
}
return lines;};
</code></pre>

blocks|key|1505100|text|一行答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1505101|var+height+=+parseInt(ctx.font)+*+1.2;+|code-block|syntax|javascript|1505102|CSS+"line-height:+normal“介于1和1.2之间|1505103|有关更多信息，请阅读here|offset|length|1505104|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/line-height^0|0|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

one line answer

<pre><code>var height = parseInt(ctx.font) * 1.2; 
</code></pre>

CSS "line-height: normal" is between 1 and 1.2

read <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" rel="noreferrer">here</a> for more info

blocks|key|1290551|text|近似解：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290552|var+c+=+document.getElementById("myCanvas");
var+ctx+=+c.getContext("2d");
ctx.font+=+"100px+Arial";
var+txt+=+"Hello+guys!"
var+wt+=+ctx.measureText(txt).width;
var+height+=+wt+/+txt.length;|code-block|syntax|javascript|1290553|这将在等宽字体中得到准确的结果。|1290554|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Approximate solution:

<pre><code>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "100px Arial";
var txt = "Hello guys!"
var wt = ctx.measureText(txt).width;
var height = wt / txt.length;
</code></pre>

This will be accurate result in monospaced font.

blocks|key|1290606|text|这是我基于这里的一些其他答案所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290607|​|1290608|function+measureText(text,+font)+{
	const+span+=+document.createElement('span');
	span.appendChild(document.createTextNode(text));
	Object.assign(span.style,+{
		font:+font,
		margin:+'0',
		padding:+'0',
		border:+'0',
		whiteSpace:+'nowrap'
	});
	document.body.appendChild(span);
	const+{width,+height}+=+span.getBoundingClientRect();
	span.remove();
	return+{width,+height};
}

var+font+=+"italic+100px+Georgia";
var+text+=+"abc+this+is+a+test";
console.log(measureText(text,+font));|code-block|syntax|javascript|1290609|1290610|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

This is what I did based on some of the other answers here:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function measureText(text, font) {
	const span = document.createElement('span');
	span.appendChild(document.createTextNode(text));
	Object.assign(span.style, {
		font: font,
		margin: '0',
		padding: '0',
		border: '0',
		whiteSpace: 'nowrap'
	});
	document.body.appendChild(span);
	const {width, height} = span.getBoundingClientRect();
	span.remove();
	return {width, height};
}

var font = "italic 100px Georgia";
var text = "abc this is a test";
console.log(measureText(text, font));</code></pre>
</div>
</div>

blocks|key|1505284|text|这适用于1)多行文本以及2)甚至在IE9中！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1505285|<div+class="measureText"+id="measureText">
</div>


.measureText+{
++margin:+0;
++padding:+0;
++border:+0;
++font-family:+Arial;
++position:+fixed;
++visibility:+hidden;
++height:+auto;
++width:+auto;
++white-space:+pre-wrap;
++line-height:+100%25;
}

function+getTextFieldMeasure(fontSize,+value)+{
++++const+div+=+document.getElementById("measureText");

++++//+returns+wrong+result+for+multiline+text+with+last+line+empty
++++let+arr+=+value.split('\n');
++++if+(arr[arr.length-1].length+==+0)+{
++++++++value+%2B=+'.';
++++}

++++div.innerText+=+value;
++++div.style['font-size']=+fontSize+%2B+"px";
++++let+rect+=+div.getBoundingClientRect();

++++return+{width:+rect.width,+height:+rect.height};
};|code-block|syntax|javascript|1505286|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works 1) for multiline text as well 2) and even in IE9!

<pre><code>&lt;div class="measureText" id="measureText"&gt;
&lt;/div&gt;


.measureText {
 margin: 0;
 padding: 0;
 border: 0;
 font-family: Arial;
 position: fixed;
 visibility: hidden;
 height: auto;
 width: auto;
 white-space: pre-wrap;
 line-height: 100%;
}

function getTextFieldMeasure(fontSize, value) {
 const div = document.getElementById("measureText");

 // returns wrong result for multiline text with last line empty
 let arr = value.split('\n');
 if (arr[arr.length-1].length == 0) {
 value += '.';
 }

 div.innerText = value;
 div.style['font-size']= fontSize + "px";
 let rect = div.getBoundingClientRect();

 return {width: rect.width, height: rect.height};
};
</code></pre>

blocks|key|1505351|text|我知道这是一个老生常谈的问题，但为了将来参考，我想添加一个简短的、最小的、仅限JS(没有jquery)的解决方案，我相信人们可以从中受益：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1505352|var+measureTextHeight+=+function(fontFamily,+fontSize)+
{
++++var+text+=+document.createElement('span');
++++text.style.fontFamily+=+fontFamily;
++++text.style.fontSize+=+fontSize+%2B+"px";
++++text.textContent+=+"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+";
++++document.body.appendChild(text);
++++var+result+=+text.getBoundingClientRect().height;
++++document.body.removeChild(text);
++++return+result;
};|code-block|syntax|javascript|1505353|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I know this is an old answered question, but for future reference I'd like to add a short, minimal, JS-only (no jquery) solution I believe people can benefit from:

<pre><code>var measureTextHeight = function(fontFamily, fontSize) 
{
 var text = document.createElement('span');
 text.style.fontFamily = fontFamily;
 text.style.fontSize = fontSize + "px";
 text.textContent = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
 document.body.appendChild(text);
 var result = text.getBoundingClientRect().height;
 document.body.removeChild(text);
 return result;
};
</code></pre>

blocks|key|1290797|text|我在我的一个项目中修补了CanvasRenderingContext2D.measureText()，以包含文本的实际高度。它是用普通的JS编写的，没有依赖项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290798|/*
+*+Monkeypatch+CanvasRenderingContext2D.measureText()+to+include+actual+height+of+the+text
+*/
;+(function+(global)+{
++"use+strict";

++var+_measureText+=+global.CanvasRenderingContext2D.prototype.measureText;

++global.CanvasRenderingContext2D.prototype.measureText+=+function+()+{
++++var+textMetrics+=+_measureText.apply(this,+arguments);

++++var+_getHeight+=+function+(text)+{
++++++var+$span+=+global.document.createElement("span");
++++++var+spanTextNode+=+global.document.createTextNode(text);
++++++$span.appendChild(spanTextNode);
++++++$span.setAttribute("style",+`font:+${this.font}`);

++++++var+$div+=+global.document.createElement("div");
++++++$div.setAttribute("style",+"display:+inline-block;+width:+1px;+height:+0;+vertical-align:+super;");

++++++var+$parentDiv+=+global.document.createElement("div");
++++++$parentDiv.appendChild($span);
++++++$parentDiv.appendChild($div);

++++++var+$body+=+global.document.getElementsByTagName("body")[0];
++++++$body.appendChild($parentDiv);

++++++var+divRect+=+$div.getBoundingClientRect();
++++++var+spanRect+=+$span.getBoundingClientRect();
++++++var+result+=+{};

++++++$div.style.verticalAlign+=+"baseline";
++++++result.ascent+=+divRect.top+-+spanRect.top;

++++++$div.style.verticalAlign+=+"bottom";
++++++result.height+=+divRect.top+-+spanRect.top;

++++++result.descent+=+result.height+-+result.ascent;

++++++$body.removeChild($parentDiv);

++++++return+result.height+-+result.descent;
++++}.bind(this);

++++var+height+=+_getHeight(arguments[0]);

++++global.Object.defineProperty(textMetrics,+"height",+{+value:+height+});

++++return+textMetrics;
++};

})(window);|code-block|syntax|javascript|1290799|您可以像这样使用它|1290800|ctx.font+=+"bold+64px+Verdana,+sans-serif";+//+Automatically+considers+it+as+part+of+height+calculation
var+textMetrics+=+ctx.measureText("Foobar");
var+textHeight+=+textMetrics.height;|1290801|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I monkey patched CanvasRenderingContext2D.measureText() in one of my project to include actual height of the text. It's written in vanilla JS and has zero dependencies.
<pre><code>/*
 * Monkeypatch CanvasRenderingContext2D.measureText() to include actual height of the text
 */
; (function (global) {
 &quot;use strict&quot;;

 var _measureText = global.CanvasRenderingContext2D.prototype.measureText;

 global.CanvasRenderingContext2D.prototype.measureText = function () {
 var textMetrics = _measureText.apply(this, arguments);

 var _getHeight = function (text) {
 var $span = global.document.createElement(&quot;span&quot;);
 var spanTextNode = global.document.createTextNode(text);
 $span.appendChild(spanTextNode);
 $span.setAttribute(&quot;style&quot;, `font: ${this.font}`);

 var $div = global.document.createElement(&quot;div&quot;);
 $div.setAttribute(&quot;style&quot;, &quot;display: inline-block; width: 1px; height: 0; vertical-align: super;&quot;);

 var $parentDiv = global.document.createElement(&quot;div&quot;);
 $parentDiv.appendChild($span);
 $parentDiv.appendChild($div);

 var $body = global.document.getElementsByTagName(&quot;body&quot;)[0];
 $body.appendChild($parentDiv);

 var divRect = $div.getBoundingClientRect();
 var spanRect = $span.getBoundingClientRect();
 var result = {};

 $div.style.verticalAlign = &quot;baseline&quot;;
 result.ascent = divRect.top - spanRect.top;

 $div.style.verticalAlign = &quot;bottom&quot;;
 result.height = divRect.top - spanRect.top;

 result.descent = result.height - result.ascent;

 $body.removeChild($parentDiv);

 return result.height - result.descent;
 }.bind(this);

 var height = _getHeight(arguments[0]);

 global.Object.defineProperty(textMetrics, &quot;height&quot;, { value: height });

 return textMetrics;
 };

})(window);
</code></pre>
You can use it like this
<pre><code>ctx.font = &quot;bold 64px Verdana, sans-serif&quot;; // Automatically considers it as part of height calculation
var textMetrics = ctx.measureText(&quot;Foobar&quot;);
var textHeight = textMetrics.height;
</code></pre>

blocks|key|1505427|text|parseInt(ctx.font,+10)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1505428|例如：|1505429|let+text_height+=+parseInt(ctx.font,+10)|1505430|例如，返回35|1505431|entityMap^0|0|M|0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|M|$]]

<code>parseInt(ctx.font, 10)</code>
e.g.
<code>let text_height = parseInt(ctx.font, 10)</code>
e.g. returns 35

blocks|key|1505468|text|我对这里没有正确的答案感到有点震惊。没有必要进行估计或猜测。而且，font-size不是字体边界框的实际大小。字体高度取决于您是否有升序和降序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1505469|要计算它，请使用ctx.measureText()并将actualBoundingBoxAscent和actualBoundingBoxDescent相加。这会给你实际的尺寸。您还可以将这两个font*版本相加，以获得用于计算诸如元素高度之类的内容的大小，但不是严格意义上的字体实际使用空间的高度。|offset|length|style|CODE|1505470|​|1505471|const+text+=+'Hello+World';
const+canvas+=+document.querySelector('canvas');
canvas.width+=+500;
canvas.height+=+200;

const+ctx+=+canvas.getContext('2d');

ctx.font+=+'100px+Arial,+Helvetica,+sans-serif';
//+top+is+critical+to+the+fillText()+calculation
//+you+can+use+other+positions,+but+you+need+to+adjust+the+calculation
ctx.textBaseline+=+'top';
ctx.textAlign+=+'center';

const+metrics+=+ctx.measureText(text);
const+width+=+metrics.width;
const+actualHeight+=+metrics.actualBoundingBoxAscent+%2B+metrics.actualBoundingBoxDescent;
const+fontHeight+=+metrics.fontBoundingBoxAscent+%2B+metrics.fontBoundingBoxDescent;

ctx.fillStyle+=+'#00F';+//+blue
ctx.fillRect((canvas.width+/+2)+-+(width+/+2),+(canvas.height+/+2)+-+(fontHeight+/+2),+width,+fontHeight);

ctx.fillStyle+=+'#0F0';+//+green
ctx.fillRect((canvas.width+/+2)+-+(width+/+2),+(canvas.height+/+2)+-+(actualHeight+/+2),+width,+actualHeight);

//+canvas.height+/+2+-+actualHeight+/+2+gets+you+to+the+top+of
//+the+green+box.+You+have+to+add+actualBoundingBoxAscent+to+shift
//++it+just+right
ctx.fillStyle+=+'#F00';+//+red
ctx.fillText(text,+canvas.width+/+2,+canvas.height+/+2+-+actualHeight+/+2+%2B+metrics.actualBoundingBoxAscent);|code-block|syntax|javascript|1505472|<canvas></canvas>|1505473|1505474|entityMap^0|0|8|H|R|N|1F|O|2O|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|S|$]]

I'm kind of shocked that there are no correct answers here. There is no need to make an estimate or a guess. Also, the font-size is not the actual size of the bounding box of the font. The font height depends on whether you have ascenders and descenders.
To calculate it, use <code>ctx.measureText()</code> and add together the <code>actualBoundingBoxAscent</code> and the <code>actualBoundingBoxDescent</code>. That'll give you the actual size. You can also add together the <code>font*</code> versions to get the size that is used to calculate things like element height, but isn't strictly the height of the actual used space for the font.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const text = 'Hello World';
const canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 200;

const ctx = canvas.getContext('2d');

ctx.font = '100px Arial, Helvetica, sans-serif';
// top is critical to the fillText() calculation
// you can use other positions, but you need to adjust the calculation
ctx.textBaseline = 'top';
ctx.textAlign = 'center';

const metrics = ctx.measureText(text);
const width = metrics.width;
const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
const fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;

ctx.fillStyle = '#00F'; // blue
ctx.fillRect((canvas.width / 2) - (width / 2), (canvas.height / 2) - (fontHeight / 2), width, fontHeight);

ctx.fillStyle = '#0F0'; // green
ctx.fillRect((canvas.width / 2) - (width / 2), (canvas.height / 2) - (actualHeight / 2), width, actualHeight);

// canvas.height / 2 - actualHeight / 2 gets you to the top of
// the green box. You have to add actualBoundingBoxAscent to shift
// it just right
ctx.fillStyle = '#F00'; // red
ctx.fillText(text, canvas.width / 2, canvas.height / 2 - actualHeight / 2 + metrics.actualBoundingBoxAscent);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>

The spec has a context.measureText(text) function that will tell you how much width it would require to print that text, but I can't find a way to find out how tall it is. I know it's based on the font, but I don't know to convert a font string to a text height.

How can you find the height of text on an HTML canvas?

规范有一个文本(context.measureText)函数，它将告诉您打印文本需要多大宽度，但我找不到一种方法来确定它有多高。我知道它是基于字体的，但我不知道如何将字体字符串转换为文本高度。

问如何在HTML画布上找到文本的高度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML画布上找到文本的高度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML画布上找到文本的高度？
EN