HTML5 Canvas 基礎(六) 繪製文字

使用 canvas 繪製文字時是利用 .fillText(textDraw, x, y) ,其中 textDraw 為文字的內容,x,y 則為座標位置,我們在繪製前一樣可以多做一些設定。

  • font:設定文字大小、字型跟粗細等等,寫法跟 css 類似,完整可以設定可以參考官方說明
  • textAlign:就座標位置設定對齊方向,可以設定 start, end, left, right, center
  • textBaseline:基線對齊位置,可以參考官方說明設定

設定完後透過 fillText 繪製填色文字,strokeText 繪製邊框文字,若沒有特別設定填色或邊框顏色則預設為黑色。