格式化文字

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";