文字的渲染和css樣式中的font屬性設(shè)置很相識(shí)，其理念是相通的
幾個(gè)常用屬性：
- font
- fillText(), strokeText()： 注意最后有個(gè)可選參數(shù)'maxLength',用來(lái)設(shè)置文字的寬度
- textAlign, textBaseline
- mesureText(string).width: 獲取字符串顯示的寬度(單位： px)
一.渲染文字
最基本的示例：
ctx.font = 'bold 20px Arial';
// 這個(gè)fillStyle 可以使用
// createPattern中函數(shù)進(jìn)行更豐富的設(shè)置
ctx.fillStyle = 'red'
ctx.fillText('hello canvas', 100, 100)
當(dāng)然也可以使用 strokeText() 對(duì)字體進(jìn)行描邊
二.API 講解
1.fillText() | strokeText()
函數(shù)簽名：
/*
* @param string: 就是要繪制的文字
* @param x, y: 繪制開始的坐標(biāo)(x, y)
* @param [maxLen]: 可選參數(shù)，繪制上面文字，允許的最大寬度
*/
fillStyle(string, x, y, [maxLen])
strokeStyle(string, x, y, [maxLen])
示例：
fillText('hello canvas', 100, 100)
fillText('hello canvas', 100, 200, 400)
2.font
默認(rèn)值： '20px sans-serif'
ctx.font =
font-style font-variant font-weight
font-size font-family
可以看出和css中font的設(shè)置一樣，但是canvas中如果設(shè)置font則至少要設(shè)置字體大小和字體類型2個(gè)值
說(shuō)一下比較少見的font-variant屬性：
font-variant: normal (默認(rèn)值)
small-caps // 表示字號(hào)不變，將字母設(shè)置為大寫
3.textAlign 文本對(duì)齊
這個(gè)和css中 text-align一致,用來(lái)繪制橫向坐標(biāo)對(duì)齊：
ctx.textAlign = left
center
right
4.textBaseline
這個(gè)和css中 vertical-align一致，用于設(shè)置文本的基準(zhǔn)線對(duì)齊方式：
ctx.textBaseline = top
middle
bottom
5.measureText(string).width
計(jì)算渲染文字的寬度
調(diào)用這個(gè)函數(shù)之前必須先設(shè)置好font屬性，因?yàn)閒ont屬性會(huì)影響這個(gè)屬性的值
ctx.measureText(string).width
總結(jié)
文字的繪制和css樣式中設(shè)置文字的屬性比較相似，當(dāng)時(shí)canvas中的一些其它屬性，比如fillStyle, strokeStyle等使得文字更加的強(qiáng)大
