如何使用JavaScript获取文本顶行的位置

Question

我正在查看Daniel Earwicker的answer以“如何在HTML画布上找到文本的高度？”。 它为我提供了一种在文本高度上获得某些指标的方法。

然而，我感兴趣的是获得以下黑线的指标：

是否可以使用这种方法获得它？ 请参阅http://jsfiddle.net/BL5nP（硬编码黑线）。

HTML：

<canvas width="500" height="500"></canvas>

JavaScript的：

// function from https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas/9847841#answer-9847841
var getTextHeight = function(font) 
{
    var text = $('<span>Ag</span>');
    text[0].style.font = 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;
};

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

var ctx = $('canvas')[0].getContext('2d');
var x = 10;
var y = 10;

var font = '36pt Times';
var message = 'ABCD';

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

var w = ctx.measureText(message).width;
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');
testLine(ctx, x, y + 10, w, 'black'); // this line is what I am interested in

Answer 1

有一个小型的fontmetrics库可以实现技巧https://github.com/Pomax/fontmetrics.js

获得上升（字母l的顶部）的唯一可靠方法是简单地在画布上绘制文本并计算白线直到顶部边界可见（这是上面的库所做的）。

通过对齐内联跨度和div，有几种近似值，但它们都没有提供可靠的跨浏览器结果。例如。这一个依赖于getBoundingClientRect()，可以在某些有限的情况下使用，但不是一般的：http://jsfiddle.net/Exceeder/rP7Jj/