- HTML 画布教程
- HTML 画布 - 首页
- HTML 画布 - 简介
- 环境设置
- HTML 画布 - 第一个应用程序
- HTML 画布 - 绘制二维形状
- HTML 画布 - 路径元素
- 使用路径元素绘制二维形状
- HTML 画布 - 颜色
- HTML 画布 - 添加样式
- HTML 画布 - 添加文本
- HTML 画布 - 添加图像
- HTML 画布 - 画布时钟
- HTML 画布 - 变换
- 合成和裁剪
- HTML 画布 - 基本动画
- 高级动画
- HTML 画布 API 函数
- HTML 画布 - 元素
- HTML 画布 - 矩形
- HTML 画布 - 直线
- HTML 画布 - 路径
- HTML 画布 - 文本
- HTML 画布 - 颜色和样式
- HTML 画布 - 图像
- HTML 画布 - 阴影和变换
- HTML 画布有用资源
- HTML 画布 - 快速指南
- HTML 画布 - 有用资源
- HTML 画布 - 讨论
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()
此方法向要在画布元素上绘制的文本添加描边。 |
广告