繪制文本

在HTML5中，我們還可以在Canvas「畫(huà)布」上繪制我們所需的文本文字，其中所涉及到的CanvasRenderingContext2D對(duì)象的主要屬性和方法如下：

屬性或方法	基本描述
font	設(shè)置繪制文字所使用的字體，例如20px 宋體，默認(rèn)值為10px sans-serif。該屬性的用法與css font屬性一致，例如italic bold 14px/30px Arial,宋體
fillStyle	用于設(shè)置畫(huà)筆填充路徑內(nèi)部的顏色、漸變和模式。該屬性的值可以是一個(gè)表示CSS顏色值的字符串。如果你的繪制需求比較復(fù)雜，該屬性的值還可以是一個(gè)CanvasGradient對(duì)象或者CanvasPattern對(duì)象
strokeStyle	用于設(shè)置畫(huà)筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個(gè)表示CSS顏色值的字符串。如果你的繪制需求比較復(fù)雜，該屬性的值還可以是一個(gè)CanvasGradient對(duì)象或者CanvasPattern對(duì)象
fillText(string text, int x, int y[, int maxWidth])	從指定坐標(biāo)點(diǎn)位置開(kāi)始繪制填充的文本文字。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過(guò)該參數(shù)設(shè)置，則會(huì)自動(dòng)按比例縮小字體以適應(yīng)寬度。與本方法對(duì)應(yīng)的樣式設(shè)置屬性為fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	從指定坐標(biāo)點(diǎn)位置開(kāi)始繪制非填充的文本文字(文字內(nèi)部是空心的)。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過(guò)該參數(shù)設(shè)置，則會(huì)自動(dòng)按比例縮小字體以適應(yīng)寬度。該方法與fillText()用法一致，不過(guò)strokeText()繪制的文字內(nèi)部是非填充(空心)的，fillText()繪制的文字是內(nèi)部填充(實(shí)心)的。與本方法對(duì)應(yīng)的樣式設(shè)置屬性為strokeStyle。

從上面的API描述信息中我們可以得知，在Canvas中可以使用兩種方式來(lái)繪制文本文字：一種是使用fillText()+fillStyle來(lái)繪制填充(實(shí)心)的文字；一種是使用strokeText()+strokeStyle繪制非填充(空心)的文字。

 

下面，我們先來(lái)看看如何使用canvas繪制實(shí)心文字，具體html代碼如下：