HTML 画布 - 文本



可以使用可用的方法和属性在画布元素上渲染文本。我们还可以设置绘制文本的样式,以便生成有效的图形。

TextMetrics 接口和 CanvasRenderingcontext2D 用于绘制和设置文本样式,以及识别在画布元素内渲染的文本的结构属性。文本通常使用 CanvasRenderingContext2D 对象通过可用方法进行渲染,也可以使用只读属性检索。

属性

下表列出了在画布元素上绘制和设置文本样式的可用属性。

序号 属性和描述
1 actualBoundingBoxAscent

此属性返回从基线属性指示的水平线到在画布内绘制文本的矩形顶部的距离。

2 actualBoundingBoxDescent

此属性返回从基线属性指示的水平线到在画布内绘制文本的矩形底部的距离。

3 actualBoundingBoxLeft

此属性返回平行于文本基线到文本边界矩形左侧的距离(以像素为单位)。

4 actualBoundingBoxRight

此属性返回平行于文本基线到文本边界矩形右侧的距离(以像素为单位)。

5 direction

direction 属性指定即将绘制到画布元素上的文本的方向。

6 font

此 Canvas API 属性指定即将绘制到画布元素上的文本的文本大小、样式和字体样式。

7 fontBoundingBoxAscent

TextMetrics 接口的此属性返回从文本基线的水平线到画布内文本最高边界矩形顶部的距离。

8 fontBoundingBoxDescent

TextMetrics 接口的此属性返回从文本基线的水平线到画布内文本最高边界矩形底部的距离。

9 textAlign

画布元素对象的此属性指定绘制文本时要使用的文本对齐方式。

10 textBaseline

画布元素对象的此属性指定绘制文本时要使用的文本基线。

方法

以下是可用于对 HTML 画布的文本元素执行各种操作的各种方法。

序号 方法和描述
1 fillText()

此方法填充绘制在画布元素上的文本。

2 measureText()

使用此方法时,将返回绘制到画布上的文本信息。

3 strokeText()

此方法向要在画布元素上绘制的文本添加描边。

广告