# HTML5 画布中的文字
> 原文： [https://zetcode.com/gfx/html5canvas/text/](https://zetcode.com/gfx/html5canvas/text/)
在 HTML5 画布教程的这一部分中，我们将处理文本。
## 文字和字体
字符是表示诸如字母，数字或标点符号之类的项目的符号。 字形是用于呈现字符或字符序列的形状。 在拉丁字母中，字形通常代表一个字符。 在其他书写系统中，一个字符可能由几个字形组成，例如ť，ž，ú，ô。 这些是带有重音符号的拉丁字符。
可以使用各种字体在画布上绘制文本。 字体是一组具有特定字体设计和大小的字体字符。 各种字体包括 Helvetica，Georgia，Times 或 Verdana。 具有特定样式的字形的集合形成字体面。 字体的集合构成字体家族。
## 绘制文字
HTML5 `canvas`上下文有两种绘制文本的方法：`strokeText()`和`fillText()`。 不同之处在于`fillText()`方法绘制文本的内部，而`strokeText()`方法绘制文本的轮廓。
`drawing_text.html`
```js
HTML5 canvas drawing text
```
该示例在画布上绘制两个字符串。
```js
ctx.font = "28px serif";
```
`canvas`上下文`font`属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。
```js
ctx.fillText("ZetCode", 15, 25);
```
`fillText()`方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的 x 和 y 坐标。
图：绘制文本
## 字形
在下面的示例中，我们演示了几种字体属性。
`text_font.html`
```js
HTML5 canvas drawing text
```
该示例绘制了三个具有不同字体样式，变体和粗细的单词。
```js
ctx.font = "normal bold 18px serif";
```
此行设置`normal`字体样式和`bold`字体粗细。
```js
ctx.font = "small-caps bolder 18px serif";
```
此行设置`small-caps`字体变体和`bolder`字体粗细。
图：文本字体
## 文字基线
Canvas 2D API 的`textBaseline`属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。
`text_baseline.html`
```js
HTML5 canvas text baseline
```
该示例使用所有可用的文本基线绘制字符串。
```js
ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100);
```
这些行在顶部基线模式下绘制文本。
图：文字基线
## 文字对齐
Canvas 2D API 的`textAlign`属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于`fillText()`方法的 x 值。 可能的值为：左，右，居中，开始和结束。
`text_alignment.html`
```js
HTML5 canvas text alignment
```
该示例使用所有可用的文本对齐方式绘制文本。
```js
var cw = canvas.width/2;
```
我们计算画布中间点的 x 坐标。 我们的文字围绕这一点对齐。
```js
ctx.beginPath();
ctx.moveTo(cw, 0);
ctx.lineTo(cw, canvas.height);
ctx.stroke();
```
为了更好地视觉理解，我们在画布的中间绘制了一条细的垂直线。
```js
ctx.textAlign = "center";
ctx.fillText("center", cw, 20);
```
这些线使文本水平居中。
图：文本对齐
在 HTML5 画布教程的这一部分中，我们介绍了文本。