Измерять высоту текста на элементе холста html5

Я знаю, что могу использовать context.measureText, чтобы получить ширину некоторого текста, если теперь он будет отображаться на холсте. Есть ли способ сделать то же самое, но получить высоту текста?

просто мысль про себя - может быть, я могу повернуть текст 90Deg, а затем проверить ширину?...

Ответ 1

Этот ответ SO, вероятно, слишком переработан для ваших нужд Как вы можете найти высоту текста на холсте HTML?

Я предпочитаю нечто более простое:

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>

Ответ 2

У меня была такая же проблема, и я нашел это. Получите размер шрифта из строки. Я не знаю почему, но он работает только тогда, когда вы устанавливаете proprety в PT, а не PX.

ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.

Затем возьмите из него значение.

var txtHeight = parseInt(ctx.font);

Теперь у вас есть высота для вашего texte. Как я уже сказал, на моей стороне мне пришлось установить размер в PT как PX

Ответ 3

Вы можете установить размер шрифта вашего холста в пикселях, которые вы ДОЛЖНЫ использовать в качестве высоты вашего текстового поля. Однако, когда я пришел к этому, я обнаружил, что мне нужно добавить примерно 50% высоты пикселя, чтобы получить точное значение:

var textHeight = fontSize * 1.5;

Если этого недостаточно для вас, есть несколько довольно полномасштабных решений, описанных здесь , один из которых использует метод getImageData для подсчета количество вертикальных пикселей.