Spec bir içeriği vardır.measureText(metin) yazdırmak için bir metin gerektirecektir nasıl anlatacağım işlevi, ama ne kadar uzun boylu olduğunu öğrenmek için bir yol bulamıyorum. Yazı tipi dayalı olduğunu biliyorum, ama metin yüksekliği yazı tipi bir dize dönüştürmek için bilmiyorum.

Ardından gelen ellisbben cevabı, burada gelişmiş bir sürümü almak için tırmanış ve iniş gelen taban, yani aynı tmAscent tmDescent tarafından döndürülen Win32 GetTextMetric API. Bu ise farklı yazı tiplerini açıklıklı metin sözcük kaydırma bir çalışma yapmak istiyorsan/boyutları gereklidir.

Yukarıdaki şekilde oluşturulan bir tuval Safari, kırmızı olmak üst satırı nerede tuval olduğunu söyledi çizmek için metin, yeşil olmak temel ve mavi olmak alt (yani kırmızı, mavi tam boy).

Succinctness için jQuery kullanarak:

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;
};

Bir metin öğesi ek olarak, tarayıcı koymak nerede vertical-align tarzı ayarlayın, ve sonra ben display: inline-block ile bir div ekliyorum.

Geri ascent, descent height ile bir nesne sadece kolaylık için 11* descent *() olsun. Bunu test etmek için, yatay bir çizgi çizer bir işlevi olması buna değer:

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();
};

Metin tuval üst, temel ve alt kısmına göre yerleştirilip yerleştirilmediğini görebilirsiniz:

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');