繪制文本
在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 。 |
下面,我們先來看看如何使用canvas繪制實心文字,具體html代碼如下:
新聞熱點
疑難解答