iT邦幫忙

0

Canvas - 文字篇

文字的需求對 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 

尚未有邦友留言

立即登入留言