绘图文字

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

要在画布上绘制文本,请获取对画布的引用,然后在上下文中调用 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);

结果:

StackOverflow 文档

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

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

结果:

StackOverflow 文档

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