在 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