API簡介
今天我們開始征戰一個全新的內容——HTML5 Canvas的文本API!要知道,藝術家通常同時也是一個書法家,所以我們要學習寫字,而且是寫出漂亮的字。是不是很有意思?
好了,先預告一下Canvas 文本API有哪些。
屬性 | 描述 |
---|---|
font | 設置或返回文本內容的當前字體屬性 |
textAlign | 設置或返回文本內容的當前對其方式 |
textBaseline | 設置或返回在繪制文本時使用的當前文本基線 |
方法 | 描述 |
---|---|
fillText() | 在畫布上繪制“被填充的”文本 |
strokeText() | 在畫布上繪制文本(無填充) |
measureText() | 返回包含指定文本寬度的對象 |
看了上面的表格,相信童鞋們以及有了大概的認識。這里,我們先說文本的顯示與渲染,用到了font,fillText()與strokeText()。
基本文本顯示
在Canvas上使用文本,必須得先知道:Canvas上的文本不能使用CSS樣式,雖然font屬性與CSS的屬性相似,但是卻不能夠交換使用。
顯示文本三步走戰略:
1.使用font設置字體。
2.使用fillStyle設置字體顏色。
3.使用fillText()方法顯示字體。
這里的font屬性可以不指定,如果沒有指定字體,則默認自動使用 10px 無襯線體。
下面的代碼簡單顯示了一段文本
新聞熱點
疑難解答