格式化文本

fillTextstrokeText 方法提供的默认字体格式在美学上并不具有吸引力。幸运的是,canvas API 提供了格式化文本的属性。

使用 font 属性,你可以指定:

  • 字体样式
  • 字体变形
  • 字体重量
  • font-size / line-height
  • 字体系列

例如:

ctx.font = "italic small-caps bold 40px Helvetica, Arial, sans-serif";
ctx.fillText("My text", 20, 50);

结果:

StackOverflow 文档

使用 textAlign 属性,你还可以将文本对齐方式更改为:

  • 剩下
  • 中央
  • 结束(与右一样)
  • 开始(和左一样)

例如:

ctx.textAlign = "center";