TextMetrics - 表示画布中一段文本的尺寸

TextMetrics 接口表示画布中一段文本的尺寸；可以使用 CanvasRenderingContext2D.measureText() 方法获得 TextMetrics 实例。

属性

TextMetrics.width 只读

一个 double，以 CSS 像素为单位，表示一段内联文本的计算宽度。它考虑了上下文的当前字体。

TextMetrics.actualBoundingBoxLeft 只读

一个 double，以 CSS 像素为单位，给出从 CanvasRenderingContext2D.textAlign 属性给定的对齐点到给定文本的边界矩形左侧的距离。该距离是平行于基线测量的。

TextMetrics.actualBoundingBoxRight 只读

一个 double，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textAlign 属性给出的对齐点到给定文本边界矩形右侧的距离。该距离是平行于基线测量的。

TextMetrics.fontBoundingBoxAscent 只读

一个 double，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的最高边界矩形的顶部的距离。

TextMetrics.fontBoundingBoxDescent 只读

一个 double，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的边界矩形的底部的距离。

TextMetrics.actualBoundingBoxAscent 只读

一个 double ，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的边界矩形顶部的距离。

TextMetrics.actualBoundingBoxDescent 只读

一个 double ，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的边界矩形底部的距离。

TextMetrics.emHeightAscent 只读

一个 double ，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框内 em 正方形顶部的距离。

TextMetrics.emHeightDescent 只读

一个 double ，以 CSS 像素表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框中 em 正方形底部的距离。

TextMetrics.hangingBaseline 只读

一个 double ，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到线框的悬挂基线的距离。

TextMetrics.alphabeticBaseline 只读

一个 double ，以 CSS 像素为单位，表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到线框的字母基线的距离。

TextMetrics.ideographicBaseline 只读

一个 double，以 CSS 像素表示从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到线框的表意基线的距离。

实例

基线说明

该实例演示了 TextMetrics 对象的基线。默认基线是 alphabeticBaseline。另请参见 CanvasRenderingContext2D.textBaseline 属性。

HTML

<canvas id="canvas" width="550" height="500"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const baselinesAboveAlphabetic = ['fontBoundingBoxAscent', 'actualBoundingBoxAscent', 
                   'emHeightAscent', 'hangingBaseline'];
const baselinesBelowAlphabetic = ['ideographicBaseline', 'emHeightDescent', 
                   'actualBoundingBoxDescent', 'fontBoundingBoxDescent'];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = '25px serif';
ctx.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
  let text = 'Abcdefghijklmnop (' + baseline + ')';
  let textMetrics = ctx.measureText(text);
  let y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);
  let lineY = y - Math.abs(textMetrics[baseline]);
  if (baselinesBelowAlphabetic.includes(baseline)) {
    lineY = y + Math.abs(textMetrics[baseline]);
  }
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();

});
</script>

测量文字宽度

在测量文本的 x 方向时，由于字符的倾斜 / 斜体字体超出了行进宽度，因此 actualBoundingBoxLeft 和 actualBoundingBoxRight 之和可能比内联框的宽度（width）宽。

因此，使用 actualBoundingBoxLeft 和 actualBoundingBoxRight 之和作为获取绝对文本宽度的更准确方法可能很有用：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const text = 'Abcdefghijklmnop';
ctx.font = 'italic 50px serif';
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(Math.abs(textMetrics.actualBoundingBoxLeft) +
            Math.abs(textMetrics.actualBoundingBoxRight));
// 462.8833333333333

规范

规范
HTML Living Standard TextMetrics 的定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• CanvasRenderingContext2D 中的 Creator 方法
• <canvas> 元素及其关联的接口 HTMLCanvasElement
HTMLCanvasElement