| 屬性 | 描述 |
|---|---|
| font | 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性 |
| textAlign | 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)其方式 |
| textBaseline | 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線 |
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪制“被填充的”文本 |
| strokeText() | 在畫布上繪制文本（無填充） |
| measureText() | 返回包含指定文本寬度的對(duì)象 |
看了上面的表格，相信童鞋們以及有了大概的認(rèn)識(shí)。這里，我們先說文本的顯示與渲染，用到了font，fillText()與strokeText()。
基本文本顯示
在Canvas上使用文本，必須得先知道：Canvas上的文本不能使用CSS樣式，雖然font屬性與CSS的屬性相似，但是卻不能夠交換使用。
顯示文本三步走戰(zhàn)略：
1.使用font設(shè)置字體。
2.使用fillStyle設(shè)置字體顏色。
3.使用fillText()方法顯示字體。
這里的font屬性可以不指定，如果沒有指定字體，則默認(rèn)自動(dòng)使用 10px 無襯線體。
下面的代碼簡(jiǎn)單顯示了一段文本
運(yùn)行結(jié)果：
設(shè)置文本字體font
在Canvas中設(shè)置字體樣式非常的容易，font屬性與CSS的設(shè)置字體格式是一樣的，因此只需通過把與CSS兼容的字符串應(yīng)用到font屬性即可。可以設(shè)置字體的樣式、字體的變體、字體的粗細(xì)、字號(hào)和行高、字體外觀等。
基本格式如下。
以上五個(gè)參數(shù)均可缺省，各個(gè)參數(shù)間用逗號(hào)隔開。
提示：參數(shù)用中括號(hào)[]包裹起來表示可以缺省。
下面一一來介紹一下這些參數(shù)值的意義。
font-style
font-style 屬性定義字體的風(fēng)格。
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。 |
| italic | 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。 |
| oblique | 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。 |
后兩者通常情況下看上去是沒啥區(qū)別的。但是獲取傾斜效果的方法并不同。italic是使用字體庫(kù)中的斜體字，通常一個(gè)字體庫(kù)是擁有該字體的斜體形式和粗體形式。oblique是直接將字傾斜，如果一個(gè)字體庫(kù)沒有斜體字那么就不能使用italic，想要獲取傾斜字體只能使用oblique。
font-variant
font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。 |
| small-caps | 瀏覽器會(huì)顯示小型大寫字母的字體。 |
就是這樣，上面一行是使用的默認(rèn)值normal，下面一行使用的是small-caps。效果就是，原本大寫的英文字母不變，小寫的英文字母變成大寫，但是大小不變。
font-weight
font-weight 屬性設(shè)置文本的粗細(xì)。
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。 |
| bold | 定義粗體字符。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細(xì)的字符。 |
| 100-900之間的值 | 定義由粗到細(xì)的字符。400等同于normal，而700等同于bold。 |
font-size
font-size 屬性可設(shè)置字體的尺寸。
| 值 | 描述 |
|---|---|
| xx-samll | 最小字體 |
| x-small | 較小字體 |
| samll | 小字體。 |
| medium | 缺省值。 |
| large | 大字體。 |
| x-large | 較大字體。 |
| xx-large | 較大字體。 |
| 任意數(shù)值 | 單位px，代表字號(hào)值 |
line-height
line-height 屬性設(shè)置行間的距離（行高）。不允許使用負(fù)值
font-family
font-family 規(guī)定元素的字體系列。
使用@font-face自定義字體
HTML5支持常用字體，如果沒有可以使用@font-face擴(kuò)展字體。但是并不建議使用。
@font-face 能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。目前支持加載EOT與TTF文件。
示例：代碼過長(zhǎng)，略XD
我這里下載的字體庫(kù)只有A-Z這26個(gè)大寫英文字母，所以遇到小寫的自動(dòng)轉(zhuǎn)大寫，遇到漢字或者數(shù)字它指定用星星符號(hào)代替。使用了CSS3中的@font-face即可自定義字體，是不是非常的酷。
文本渲染
同繪制矩形一樣，這里“繪制”文本也給出了兩種方法——fillText()與strokeText()。之所以說一樣，因?yàn)檫@兩個(gè)方法也可以通過fillStyle與strokeStyle設(shè)置對(duì)應(yīng)的屬性，之前說過的顏色填充、漸變填充、甚至是圖案填充都是可以的。
fillText()與strokeText()的參數(shù)表是一樣的，接受4個(gè)參數(shù)，分別是String，x，y與maxlen，其中String是指要顯示的字符串，之后x與y是指顯示的坐標(biāo)，最后一個(gè)maxlen是可以缺省的數(shù)值型參數(shù)，代表顯示的最大寬度，單位是像素。如果文本的長(zhǎng)度超過了這個(gè)maxlen，Canvas就會(huì)將顯示文本橫向壓縮。通常為了保證字體的美觀，我們不設(shè)置maxlen。
即context.fillText(String,x,y,[maxlen])與context.strokeText(String,x,y,[maxlen])。
下面我們通過一個(gè)案例來看看文本渲染的效果。
運(yùn)行結(jié)果：
這里第一行使用的是一般顏色的strokeText()方法，第二行使用的是漸變色的fillText()方法，第三行設(shè)置了maxlen，第四行給字體填充的是紋理圖案，第五行是廣告……
標(biāo)簽：晉中 牡丹江 內(nèi)蒙古 安慶 煙臺(tái) 邯鄲 撫州 玉溪
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《使用HTML5 Canvas API控制字體的顯示與渲染的方法》，本文關(guān)鍵詞 使用,HTML5,Canvas,API,控制,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
