规范有一个文本(context.measureText)函数,它将告诉您打印文本需要多大宽度,但我找不到一种方法来确定它有多高。我知道它是基于字体的,但我不知道如何将字体字符串转换为文本高度。
发布于 2012-11-10 09:36:44
通过检查大写字母M的长度,可以得到与垂直高度非常接近的高度。
ctx.font = 'bold 10px Arial';
lineHeight = ctx.measureText('M').width;
发布于 2009-07-16 04:20:06
画布规范没有给我们一种测量绳子高度的方法。但是,您可以以像素为单位设置文本的大小,并且通常可以相对容易地计算出垂直边界。
如果您需要更精确的内容,那么您可以将文本放到画布上,然后获取像素数据,并计算出垂直使用了多少像素。这将是相对简单的,但效率不是很高。你可以这样做(它可以工作,但是在你的画布上绘制一些你想要删除的文本):
function measureTextHeight(ctx, left, top, width, height) {
// Draw the text in the specified area
ctx.save();
ctx.translate(left, top + Math.round(height * 0.8));
ctx.mozDrawText('gM'); // This seems like tall text... Doesn't it?
ctx.restore();
// Get the pixel data from the canvas
var data = ctx.getImageData(left, top, width, height).data,
first = false,
last = false,
r = height,
c = 0;
// Find the last line with a non-white pixel
while(!last && r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
last = r;
break;
}
}
}
// Find the first line with a non-white pixel
while(r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
first = r;
break;
}
}
// If we've got it then return the height
if(first != r) return last - first;
}
// We screwed something up... What do you expect from free code?
return 0;
}
// Set the font
context.mozTextStyle = '32px Arial';
// Specify a context and a rect that is safe to draw in when calling measureTextHeight
var height = measureTextHeight(context, 0, 0, 50, 50);
console.log(height);
对于Bespin,他们通过测量小写‘m’的宽度来伪造高度。我不知道这是如何使用的,我也不推荐使用这种方法。下面是相关的Bespin方法:
var fixCanvas = function(ctx) {
// upgrade Firefox 3.0.x text rendering to HTML 5 standard
if (!ctx.fillText && ctx.mozDrawText) {
ctx.fillText = function(textToDraw, x, y, maxWidth) {
ctx.translate(x, y);
ctx.mozTextStyle = ctx.font;
ctx.mozDrawText(textToDraw);
ctx.translate(-x, -y);
}
}
if (!ctx.measureText && ctx.mozMeasureText) {
ctx.measureText = function(text) {
ctx.mozTextStyle = ctx.font;
var width = ctx.mozMeasureText(text);
return { width: width };
}
}
if (ctx.measureText && !ctx.html5MeasureText) {
ctx.html5MeasureText = ctx.measureText;
ctx.measureText = function(text) {
var textMetrics = ctx.html5MeasureText(text);
// fake it 'til you make it
textMetrics.ascent = ctx.html5MeasureText("m").width;
return textMetrics;
}
}
// for other browsers
if (!ctx.fillText) {
ctx.fillText = function() {}
}
if (!ctx.measureText) {
ctx.measureText = function() { return 10; }
}
};
发布于 2012-05-08 22:46:43
正如JJ Stiff建议的那样,您可以将文本添加到范围中,然后测量该范围的offsetHeight。
var d = document.createElement("span");
d.font = "20px arial";
d.textContent = "Hello world!";
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);
如HTML5Rocks所示
https://stackoverflow.com/questions/1134586
复制相似问题