空心文本绘制

1. 前言

上一节我们学习了利用 fillText 绘制一行有填充的文本，既然有填充的文本，那也就有只有描边的文字，也就是空心文本，本小节我们就学习利用 strokeText 方法绘制一行空心文本。

在 canvas 的 API 中已经封装了绘制空心文本的方法：strokeText。

先看一个案例：

运行结果：

上面我们就绘制了一行空心文本。

本小节中我们使用到一个新的方法，strokeText，它的使用和 fillText 完全相同。

strokeText 方法作用是绘制一行空心文字。

语法：

void ctx.strokeText(text, x, y [, maxWidth]);

变量说明：

变量名	类型	是否必须	说明
text	String	是	要绘制的文本。
x	Number	是	文本起始点的 x 轴坐标。
y	Number	是	文本起始点的 y 轴坐标。
maxWidth	Number	是	可选，需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体或者小号的字体。

本小节我们主要学习了第二种绘制文本的方法：strokeText ，canvas 也只有这两种绘制文本的方法。绘制文本时有一个注意事项：这两种绘制文本方法都只能绘制单行文本，目前 canvas 不支持绘制多行文本。