在 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。
参见
- 创建方法在
CanvasRenderingContext2D中。 - The
<canvas>element and its associated interface,HTMLCanvasElement