绘图文字

绘制到画布不仅限于形状和图像。你还可以在画布上绘制文本。

要在画布上绘制文本，请获取对画布的引用，然后在上下文中调用 fillText 方法。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillText("My text", 0, 0);

传递给 fillText 的三个必需参数是：

1. 你要显示的文本
2. 水平（x 轴）位置
3. 垂直（y 轴）位置

此外，还有第四个可选参数，可用于指定文本的最大宽度（以像素为单位）。在下面的示例中，200 的值将文本的最大宽度限制为 200px：

ctx.fillText("My text", 0, 0, 200);

结果：

你也可以使用 strokeText 方法绘制没有填充的文本，而只是绘制轮廓：

ctx.strokeText("My text", 0, 0);

结果：

如果没有应用任何字体格式化属性，画布默认情况下在 sans-serif 中以 10px 呈现文本，这使得很难看到 fillText 和 strokeText 方法的结果之间的差异。有关如何增加文本大小和对文本应用其他美学更改的详细信息，请参阅格式化文本示例 。