本節書摘來自華章計算機《html5 canvas遊戲開發實戰》一書中的第2章，第2.3節,作者：張路斌著， 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
文本在任何應用裡都是必不可少的，可是，在canvas的api中，隻能顯示文字，無法直接繪制一個輸入框。是以，當需要顯示輸入框的時候需要使用html中的文本框來代替。下面來講一下如何顯示各種各樣的文字。
2.3.1 繪制文字
繪制文字有filltext和stroketext兩種方法，下面分别說明。
1 . 使用filltext繪制文字
filltext(text,x,y,maxwidth)函數很簡單，它的4個參數分别是：文本字元串、坐标x和坐标y、文本寬，其中第4個參數可以省去。當第4個參數省去的時候，文本寬度會自動設定為整個文本的寬度。
具體使用方法如代碼清單2-15所示。
代碼清單 2-15
運作效果如圖2-17所示。
如果給filltext設定了第4個參數，那麼整個文本的寬度就會發生變化，比如：
運作效果如圖2-18所示。
2 . 使用stroketext繪制文字
使用stroketext(text,x,y,maxwidth)函數同樣需要4個參數，它的用法與filltext函數完全相同，具體實作如代碼清單2-16所示。
代碼清單 2-16
運作效果如圖2-19所示。
從效果圖上我們不難看出stroketext與filltext的差別，stroketext相當于線，而filltext相當于實心圖形，這和之前畫圖形的繪制方法是相似的。
2.3.2 文字設定
上一節我們隻是簡單地講解了如何顯示一個文本，但是，一個文本可以有多種字型格式，各種文字也有大有小，有粗有細，本節會針對文字的設定做詳細的說明。
1 . 文字大小
可能大家已經發現，在上一節的各代碼中都用到了font這個參數，如下面一行代碼：
它表示文字大小為30，字型為arial。
下面我們來了解如何設定多種不同的文字大小，具體如代碼清單2-17所示。
代碼清單 2-17
運作效果如圖2-20所示。
2 .文字字型
下面我們試着改變font中的字型，看看具體表現如何，如代碼清單2-18所示。
代碼清單 2-18
運作效果如圖2-21所示。
可以看到，經過簡單的設定就實作了不同的字型效果。
3 . 文字粗體效果
和css一樣，我們同樣可以在canvas中設定文字的font-weight屬性，來給文字設定粗體效果。它同樣可通過font來設定，使用方法如下：
font-weight的值可以是normal（正常）、bold（粗體）、bolder（更粗）、lighter（更細），還可以通過數字直接來設定，如下所示：
下面設定不同的font-weight，來對比一下效果，如代碼清單2-19所示。
代碼清單 2-19
運作效果如圖2-22所示。
可以看到，文字的粗細根據font-weight的值不同，效 果也都有所不同。
4 . 文字斜體效果
有時候我們需要用斜體的方式來顯示文字，canvas中的文字也有font-style屬性，它也可通過設定font來處理，使用的方法如下：
font-style的值可以設定為italic，也可以設定為oblique，它們都表示斜體，如代碼清單2-20所示。
代碼清單 2-20
運作效果如圖2-23所示。
2.3.3 文字的對齊方式
canvas中的文字通過textalign和textbaseline來實作文字的對齊。textalign是水準方向的文字對齊，它的值包括center、end、left、right、start。textbaseline是豎直方向的文字對齊，它的值包括alphabetic、bottom、hanging、ideographic、middle、top。
首先看水準方向的對齊。為了看出不同的對齊方式之間的差別，我們在文字坐标位置畫一條豎線，如代碼清單2-21所示。
代碼清單 2-21
運作效果如圖2-24所示。
可以看到，start與left相同，表示文字從左側開始對齊；end與right相同，表示文字從右側開始對齊，center表示文字居中。
接下來看豎直方向的對齊。同樣，為了看出不同的對齊方式之間的差別，我們在文字坐标位置畫一條橫線，如代碼清單2-22所示。
代碼清單 2-22
運作效果如圖2-25所示。
圖2-25所示很清晰地展現了豎直方向的各個對齊方式的差別。