javascript - 如何在 HTML Canvas 上找到文本的高度？

Question

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

Answer 1

更新 - 作为这个工作的一个例子，我在 Carota editor 中使用了这个技术。 .

根据 ellisbben 的回答，这是一个增强版本，用于从基线获取上升和下降，即与 tmAscent 相同和 tmDescent由 Win32 的 GetTextMetric 返回API。如果您想使用不同字体/大小的跨度进行自动换行的文本运行，则需要这样做。

上面的图像是在 Safari 的 Canvas 上生成的，红色是 Canvas 被告知绘制文本的顶行，绿色是基线，蓝色是底部(所以红色到蓝色是整个高度)。

使用 jQuery 简洁:

var getTextHeight = function(font) {

  var text = $('<span>Hg</span>').css({ fontFamily: font });
  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

  var div = $('<div></div>');
  div.append(text, block);

  var body = $('body');
  body.append(div);

  try {

    var result = {};

    block.css({ verticalAlign: 'baseline' });
    result.ascent = block.offset().top - text.offset().top;

    block.css({ verticalAlign: 'bottom' });
    result.height = block.offset().top - text.offset().top;

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

  } finally {
    div.remove();
  }

  return result;
};

除了文本元素之外，我还添加了一个带有 display: inline-block 的 div所以我可以设置它的vertical-align样式，然后找出浏览器放在哪里。

所以你用 ascent 取回一个对象, descent和 height (为方便起见，这只是 ascent + descent)。为了测试它，值得拥有一个绘制水平线的函数:

var testLine = function(ctx, x, y, len, style) {
  ctx.strokeStyle = style; 
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + len, y);
  ctx.closePath();
  ctx.stroke();
};

然后您可以看到文本在 Canvas 上相对于顶部、基线和底部的位置:

var font = '36pt Times';
var message = 'Big Text';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top'; // important!
ctx.font = font;
ctx.fillText(message, x, y);

// Canvas can tell us the width
var w = ctx.measureText(message).width;

// New function gets the other info we need
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');