文字的需求對 canvas 相對較小，但有時候還是用的到，這邊簡短介紹一下

文本樣式

基本上設定方法與 css 大同小異

font

使用方法同 css 的 font 屬性，預設為 10px sans-serif

textAlign

設定 X 軸的對齊方式，共有四個值供使用，預設為 start

• start: 若文本排序是左到右，則同 left
• end: 若文本排序是左到右，則同 right
• left: 靠右對齊
• right: 靠左對齊
• center: 置中對齊

textBaseline

基準線對齊方式，共有六個值供使用，預設為 alphabetic

• alphabetic: 對齊字母基準線
• top: 對齊頂端
• bottom: 對齊底部
• middle: 對齊中間
• hanging: 懸掛文本，與top類似，由藏文和印度語使用
• ideographic: 表意基準線，與bottom類似，由中文、日文和韓文使用

direction

文字排序方向性，預設為 inherit

• inherit: 繼承父元素
• ltr: 左到右
• rtl: 右到左

文本繪製

文本繪製分為實心與空心，使用上相當容易

實心文本

maxWidth 為選填

ctx.fillText(text, x, y , maxWidth);

// 範例
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50);

範例文字

空心文本

maxWidth 為選填

ctx.strokeText(text, x, y , maxWidth);

// 範例
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50);

範例文字

文本寬度

若需測量文本寬度，canvas 有提供一個方法測量

ctx.measureText(text);

// 範例
var text = ctx.measureText('text');
console.log(text.width); // 16.1181640625