Canvas 基礎（四）：文字
阿新 • • 發佈：2022-05-06
基礎
畫布對於文字相關的屬性有三個：
| 屬性 | 描述 |
|---|---|
| font | 設定或返回文字內容的當前字型屬性 |
| textAlign | 設定或返回文字內容的當前對齊方式 |
| textBaseline | 設定或返回在繪製文字時使用的當前文字基線 |
畫布對於文字相關的方法有三個：
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪製有填充文字 |
| strokeText() | 在畫布上繪製無填充文字 |
| measureText() | 返回包含指定文字寬度物件 |
方法
fillText
fillText 可以繪製有填充文字，即文字不是鏤空。
ctx.beginPath(); ctx.font = '25px Georgia'; ctx.fillText('Hello World!', 90, 150);
最終效果：
strokeText
strokeText 可以繪製無填充文字，即文字是鏤空。
ctx.beginPath();
ctx.font = '25px Georgia';
ctx.strokeText('Hello World!', 90, 150);
最終效果：
屬性
textAlign
textAlign 屬性是以 x 軸設定文字的對齊方式，有五個屬性值：
| 屬性值 | 描述 |
|---|---|
| left | 文字左對齊 |
| center | 文字中間對齊 |
| right | 文字右對齊 |
| start | 文字左對齊，與 left 等效 |
| end | 文字右對齊，與 right 等效 |
五個屬性值設定的結果在畫布中的表現：
ctx.font = '15px Georgia'; ctx.beginPath() ctx.textAlign = 'start'; // 文字左對齊，與 left 等效 ctx.fillText('(start)Hello World!', 150, 20); ctx.beginPath() ctx.textAlign = 'left'; // 文字左對齊，與 start 等效 ctx.fillText('(left)Hello World!', 150, 80); ctx.beginPath() ctx.textAlign = 'center'; // 文字句中對齊 ctx.fillText('(center)Hello World!', 150, 140); ctx.beginPath() ctx.textAlign = 'end'; // 文字右對齊，與 right 等效 ctx.fillText('(end)Hello World!', 150, 200); ctx.beginPath() ctx.textAlign = 'right'; // 文字右對齊，與 end 等效 ctx.fillText('(right)Hello World!', 150, 260);
最終效果：