html5 - sirve - span html significado

medir la altura del texto en un elemento de lienzo html5

Question

Sé que puedo usar context.measureText para obtener el ancho de un texto si ahora se representa en el lienzo. ¿Hay alguna manera de hacer lo mismo pero obtener la altura del texto?

Solo un pensamiento para mí mismo: ¿quizás puedo rotar el texto 90Deg y luego probar el ancho? ...

Answer 1

Esta respuesta SO probablemente está sobre-diseñada para sus necesidades. ¿Cómo puede encontrar la altura del texto en un lienzo HTML?

Prefiero algo un poco más simple:

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>

Referencia: http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html

Answer 2

Puede establecer el tamaño de fuente de su lienzo en píxeles que DEBERÍA poder usar como el alto de su cuadro de texto. Sin embargo, cuando llegué a hacer esto, descubrí que necesitaba agregar aproximadamente el 50% de la altura del píxel para obtener un valor preciso:

var textHeight = fontSize * 1.5;

Si eso no es lo suficientemente bueno para ti, hay un par de soluciones bastante completas descritas aquí , una de las cuales usa el método getImageData para contar el número de píxeles verticales.

Answer 3

Tuve el mismo problema y lo que encontré es esto. Obtenga el tamaño de fuente de su cadena. No sé por qué, pero solo funciona cuando configura la propiedad en PT, no en PX.

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

Entonces toma el valor de eso.

var txtHeight = parseInt(ctx.font);

Ahora tienes la altura para tu texto. Como dije, en mi lado tuve que establecer el tamaño en PT como PX