天天看點

《HTML5遊戲程式設計核心技術與實戰》——2.5 繪制文字

本節書摘來自異步社群《html5遊戲程式設計核心技術與實戰》一書中的第2章,第2.5節,作者: 向峰 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

canvas中除了可以繪制圖形圖像外,還可以繪制文字,同時也可以指定文字的字型、大小、對齊方式以及填充文字的紋理。

filltext (text, x, y, [maxwidth]):在canvas上填充文字,text表示需要繪制的文字,x、y分别表示繪制在canvas上的橫、縱坐标,最後一個參數可選,表示顯示文字的最大寬度,防止文字顯示溢出。

stroketext (text, x, y, [maxwidth]):在canvas上描邊文字,參數的意義同filltext。

相關的文字的一些屬性如下所示。

font:字型屬性,可以采用類似css中font定義的寫法,比如bold 40px sans-serif表示文字是粗體,大小是40像素,字型是sans-serif。

textalign:對齊方式,常見的值如表2-2所示。

《HTML5遊戲程式設計核心技術與實戰》——2.5 繪制文字

https://yqfile.alicdn.com/8f6d90904d0a52d04cb494489ca1950c78d2be6d.png" >

《HTML5遊戲程式設計核心技術與實戰》——2.5 繪制文字

textbaseline:文字對齊基線,常見的值如表2-3所示。

比如,以下代碼顯示了welcome to html5的文字:

代碼中通過strokestyle設定文字的顔色為紅色,然後通過font設定文字的字型,最後通過stroketext描繪出文字的邊框。

繼續閱讀