我知道如果现在将在画布上呈现某些文本,我可以使用 context.measureText 来获取它的宽度。有没有办法做同样的事情但得到文本的高度?
只是对自己的一个想法-也许我可以将文本旋转 90 度然后测试宽度?...
我知道如果现在将在画布上呈现某些文本,我可以使用 context.measureText 来获取它的宽度。有没有办法做同样的事情但得到文本的高度?
只是对自己的一个想法-也许我可以将文本旋转 90 度然后测试宽度?...
这个 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>
参考: http ://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html
我有同样的问题,我发现的是这个。从您的字符串中获取字体大小。我不知道为什么,但它仅在您在 PT 中设置属性时才有效,而不是在 PX 中。
ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.
然后从中获取价值。
var txtHeight = parseInt(ctx.font);
现在您有了文本的高度。就像我说的,在我这边,我必须将 PT 中的大小设置为 PX
您可以以像素为单位设置画布的字体大小,然后您应该能够将其用作文本框的高度。然而,当我开始这样做时,我发现我需要在像素高度上增加大约 50% 才能获得准确的值:
var textHeight = fontSize * 1.5;
如果这对您来说还不够好,这里列出了几个非常成熟的解决方案,其中一个使用该getImageData
方法来计算垂直像素的数量。