MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

在 canvas 中,TextMetrics 接口表示文本的尺寸,通过 CanvasRenderingContext2D.measureText() 方法创建。

属性

TextMetrics.width 只读
double 类型,使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。
TextMetrics.actualBoundingBoxLeft 只读
double 类型,平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxRight 只读
double 类型,平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离,使用 CSS 像素计算。
TextMetrics.fontBoundingBoxAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,使用 CSS 像素计算。
TextMetrics.fontBoundingBoxDescent 只读
double 类型,根据从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界顶部的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxDescent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离,使用 CSS 像素计算。
TextMetrics.emHeightAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离,使用 CSS 像素计算。
TextMetrics.emHeightDescent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离,使用 CSS 像素计算。
TextMetrics.hangingBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离,使用 CSS 像素计算。
TextMetrics.alphabeticBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离,使用 CSS 像素计算。
TextMetrics.ideographicBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离,使用 CSS 像素计算。

规范描述

Specification Status Comment
WHATWG HTML Living Standard
TextMetrics
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 1.5 (1.8) 9.0 9.0 3.1
width 4.0 1.5 (1.8) 9.0 9.0 3.1
actualBoundingBoxLeft,
actualBoundingBoxRight,
fontBoundingBoxAscent,
fontBoundingBoxDescent,
actualBoundingBoxAscent,
actualBoundingBoxDescent,
emHeightAscent,
emHeightDescent,
hangingBaseline,
alphabeticBaseline,
ideographicBaseline
(Yes) [1] 未实现
bug 1102584
? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.8) ? 10.0 3.2
width 2.1 1.0 (1.8) ? 10.0 3.2
actualBoundingBoxLeft,
actualBoundingBoxRight,
fontBoundingBoxAscent,
fontBoundingBoxDescent,
actualBoundingBoxAscent,
actualBoundingBoxDescent,
emHeightAscent,
emHeightDescent,
hangingBaseline,
alphabeticBaseline,
ideographicBaseline
? 未实现
bug 1102584
? ? ?

Chrome-specific 注解

  • 启用高级的文本度量, 设置标识 ExperimentalCanvasFeatures 为 true。

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,