【canvas學習筆記四】繪製文字

本節咱們來學習如何繪製文字。
繪製文字有兩個主要的方法：

fillText(text, x, y [, maxWidth])
在x, y位置填充文字text，有一個可選參數maxWidth設置最大繪製寬度。
strokeText(text, x, y [, maxWidth])
在x, y位置給文字text描邊，有一個可選參數maxWidth設置最大繪製寬度。

文字樣式

有一些屬性用來設置文字的樣式：

font = value
設置字體、大小等，語法和CSS的font-famaliy屬性語法同樣。
textAlign = value
設置對齊方式。有center、right等幾種值，和CSS的值同樣。
textBaseline = value
設置文字對齊的基線。有以下幾種值： top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。
direction = value
設置文字的方向。有以下幾種值： ltr, rtl, inherit。默認值是inherit。

下面這張圖展現了textBaseline屬性各個值得對齊的基線：

其中說明一下top和bottom對齊的是em square的頂部和底部。em是印刷術裏的一種單位，學過CSS的都是知道em這個單位，em就是一個字元的高度。而em square就是一個字元的方塊。就像下面這樣：每一個字母都佔據着一個固定方塊的大小。

例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.textBaseline = 'hanging';
  ctx.fillText('Hello world', 10, 50);
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.textBaseline = 'hanging';
  ctx.strokeText('Hello world', 10, 50);
}

文字規格

canvas還提供了一個方法測量字體的寬度：

measureText()
返回一個TextMetrics對象，這個對象包含了文字當前的寬度，單位是像素。

TextMetrics對象還包含不少屬性，可是不少尚未獲得徹底支持，width屬性是獲得現代瀏覽器支持的（固然IE8是不行的啦）。

例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText('foo'); // TextMetrics object
  text.width; // 16;
}

Notes

在Gecko內核瀏覽器或其餘應用中，舊版本的一些含有moz前綴的繪圖相關API已經棄用了，在這裏能夠查看。