文字的渲染和css樣式中的font屬性設置很相識，其理念是相通的

幾個常用屬性：

• font
• fillText(), strokeText()： 注意最后有個可選參數'maxLength',用來設置文字的寬度
• textAlign, textBaseline
• mesureText(string).width: 獲取字符串顯示的寬度(單位： px)

一.渲染文字

最基本的示例：

ctx.font = 'bold 20px Arial';

// 這個fillStyle 可以使用
// createPattern中函數進行更豐富的設置
ctx.fillStyle = 'red'
ctx.fillText('hello canvas', 100, 100)

當然也可以使用 strokeText() 對字體進行描邊

二.API 講解

1.fillText() | strokeText()

函數簽名：

/*
 * @param string: 就是要繪制的文字
 * @param x, y: 繪制開始的坐標(x, y)
 * @param [maxLen]: 可選參數，繪制上面文字，允許的最大寬度
 */
fillStyle(string, x, y, [maxLen])
strokeStyle(string, x, y, [maxLen])

示例：

fillText('hello canvas', 100, 100)
fillText('hello canvas', 100, 200, 400)

2.font

默認值： '20px sans-serif'

ctx.font =
  font-style font-variant font-weight
  font-size font-family

可以看出和css中font的設置一樣，但是canvas中如果設置font則至少要設置字體大小和字體類型2個值

說一下比較少見的font-variant屬性：

font-variant: normal (默認值)
              small-caps // 表示字號不變，將字母設置為大寫 

3.textAlign 文本對齊

這個和css中 text-align一致,用來繪制橫向坐標對齊：

ctx.textAlign = left
                center
                right

4.textBaseline

這個和css中 vertical-align一致，用于設置文本的基準線對齊方式：

ctx.textBaseline = top
                   middle
                   bottom

5.measureText(string).width

計算渲染文字的寬度

調用這個函數之前必須先設置好font屬性，因為font屬性會影響這個屬性的值

ctx.measureText(string).width

總結

文字的繪制和css樣式中設置文字的屬性比較相似，當時canvas中的一些其它屬性，比如fillStyle, strokeStyle等使得文字更加的強大