繪制文本
在HTML5中，我們還可以在Canvas「畫布」上繪制我們所需的文本文字，其中所涉及到的CanvasRenderingContext2D對象的主要屬性和方法如下：
| 屬性或方法 | 基本描述 |
|---|---|
| font | 設置繪制文字所使用的字體，例如20px 宋體，默認值為10px sans-serif。該屬性的用法與css font屬性一致，例如italic bold 14px/30px Arial,宋體 |
| fillStyle | 用于設置畫筆填充路徑內部的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 |
| strokeStyle | 用于設置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 |
| fillText(string text, int x, int y[, int maxWidth]) | 從指定坐標點位置開始繪制填充的文本文字。參數maxWidth是可選的，如果文本內容寬度超過該參數設置，則會自動按比例縮小字體以適應寬度。與本方法對應的樣式設置屬性為fillStyle。 |
| strokeText(string text, int x, int y[, int maxWidth]) | 從指定坐標點位置開始繪制非填充的文本文字(文字內部是空心的)。參數maxWidth是可選的，如果文本內容寬度超過該參數設置，則會自動按比例縮小字體以適應寬度。該方法與fillText()用法一致，不過strokeText()繪制的文字內部是非填充(空心)的，fillText()繪制的文字是內部填充(實心)的。與本方法對應的樣式設置屬性為strokeStyle。 |
從上面的API描述信息中我們可以得知，在Canvas中可以使用兩種方式來繪制文本文字：一種是使用fillText()+fillStyle來繪制填充(實心)的文字；一種是使用strokeText()+strokeStyle繪制非填充(空心)的文字。
下面，我們先來看看如何使用canvas繪制實心文字，具體html代碼如下：
JavaScript Code復制內容到剪貼板
學習交流
- 綠毒越獄軟件 完美越獄4.21教程12-21
- htcg15怎么刷機？htcg15刷機教程12-21
- HTC hd7刷安卓2.2全教程12-21
- mpkg軟件下載和卸載的方法12-21
- 網站后臺系統設置的網站地址格式寫法07-09
- 防止重復提交js按鈕變灰07-09
- 不同時間顯示不同的廣告代碼07-09
- iframe框架調用高度自適應方法07-09
- 備份數據庫出現問題的解決方法07-09
熱門圖片
猜你喜歡的新聞
