4.6　繪制文本

使用fillText()和strokeText()方法，可以分別以填充方式和輪廓方式繪制文本。

4.6.1　填充文字

視頻講解

fillText()方法能夠在畫布上繪制填色文本，默認顏色是黑色。其用法如下。

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

參數(shù)說明如下：

　text：規(guī)定在畫布上輸出的文本。

　x：開始繪制文本的x坐標位置（相對于畫布）。

　y：開始繪制文本的y坐標位置（相對于畫布）。

　maxWidth：可選。允許的最大文本寬度，以像素計。

【示例】下面使用fillText()方法在畫布上繪制文本“Hi”和“Canvas API”，效果如圖4.42所示。

圖4.42　繪制填充文字

4.6.2　輪廓文字

視頻講解

使用strokeText()方法可以在畫布上繪制描邊文本，默認顏色是黑色。其用法如下。

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

參數(shù)說明如下：

　text：規(guī)定在畫布上輸出的文本。

　x：開始繪制文本的x坐標位置（相對于畫布）。

　y：開始繪制文本的y坐標位置（相對于畫布）。

　maxWidth：可選。允許的最大文本寬度，以像素計。

【示例】下面使用strokeText()方法繪制文本“Hi”和“Canvas API”，效果如圖4.43所示。

圖4.43　繪制輪廓文字

4.6.3　文本樣式

視頻講解

下面簡單介紹文本樣式的相關屬性。

　font：定義字體樣式，語法與CSS字體樣式相同。默認字體樣式為10px sans-serif。

　textAlign：設置正在繪制的文本水平對齊方式。取值說明如下：

　start：默認，文本在指定的位置開始。

　end：文本在指定的位置結(jié)束。

　center：文本的中心被放置在指定的位置。

　left：文本左對齊。

　right：文本右對齊。

　textBaseline：設置正在繪制的文本基線對齊方式，即文本垂直對齊方式。取值說明如下：

　alphabetic：默認值，文本基線是普通的字母基線。

　top：文本基線是em方框的頂端。

　hanging：文本基線是懸掛基線。

　middle：文本基線是em方框的正中。

　ideographic：文本基線是表意基線。

　bottom：文本基線是em方框的底端。

　direction：設置文本方向。取值說明如下：

　ltr：從左到右。

　rtl：從右到左。

　inherit，默認值，繼承文本方向。

【示例1】下面示例在x軸150px的位置創(chuàng)建一條豎線。位置150就被定義為所有文本的錨點。然后比較每種textAlign屬性值對齊效果，如圖4.44所示。

【示例2】下面示例在y軸100px的位置創(chuàng)建一條水平線。位置100就被定義為用藍色填充的矩形。然后比較每種textBaseline屬性值對齊效果，如圖4.45所示。

圖4.44　比較每種textAlign屬性值對齊效果

圖4.45　比較每種textBaseline屬性值對齊效果

4.6.4　測量寬度

視頻講解

使用measureText()方法可以測量當前所繪制文字中指定文字的寬度，它返回一個TextMetrics對象，使用該對象的width屬性可以得到指定文字參數(shù)后所繪制文字的總寬度，其用法如下。

    metrics=context. measureText(text);

其中的參數(shù)text為要繪制的文字。

【示例】下面是測量文字寬度的一個示例，預覽效果如圖4.46所示。

圖4.46　測量文字寬度