如何使用html5 canvas获取文本的边界框?

时间:2013-02-12 15:51:23

标签: html5 canvas

我想得到一些文字的边界框。

2 个答案:

答案 0 :(得分:3)

在我提出问题之前,我找到了答案:

http://mudcu.be/journal/2011/01/html5-typographic-metrics/#bboxUnicode http://www.w3schools.com/tags/canvas_measuretext.asp

var text_width = ctx.measureText("some text").width;

我使用text_height的行高。

这不是精确的边界框,但在文本渲染之前它是快速且可用的。

答案 1 :(得分:3)

在Chrome中工作:

const can = document.querySelector('canvas');
const ctx = can.getContext('2d');

let x = 10, y = 50;
let msg = "Hello, World!";

ctx.font = "30px monospace";

let textMetrics = ctx.measureText(msg);

ctx.fillText(msg, x, y);

console.log(textMetrics);

ctx.beginPath();
ctx.moveTo(
	x - textMetrics.actualBoundingBoxLeft,
  y - textMetrics.actualBoundingBoxAscent
);
ctx.lineTo(
  x + textMetrics.actualBoundingBoxRight, 
  y - textMetrics.actualBoundingBoxAscent
);
ctx.lineTo(
  x + textMetrics.actualBoundingBoxRight, 
  y + textMetrics.actualBoundingBoxDescent
);
ctx.lineTo(
	x - textMetrics.actualBoundingBoxLeft,
  y + textMetrics.actualBoundingBoxDescent
);
ctx.closePath();
ctx.stroke();
canvas {
  border: 1px solid black;
}
<canvas></canvas>