屬性	描述
`font`	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
`textAlign`	設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
`textBaseline`	設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線(xiàn)

方法	描述
`fillText()`	在畫(huà)布上繪制“被填充的”文本
`strokeText()`	在畫(huà)布上繪制文本（無(wú)填充）
`measureText()`	返回包含指定文本寬度的對(duì)象

看了上面的表格，相信童鞋們以及有了大概的認(rèn)識(shí)。這一節(jié)課，我們先說(shuō)文本的顯示與渲染，用到了font，fillText()與strokeText()。剩下三個(gè)屬性與方法，我們留在后面說(shuō)一說(shuō)。

基本文本顯示

在Canvas上使用文本，必須得先知道：Canvas上的文本不能使用CSS樣式，雖然font屬性與CSS的屬性相似，但是卻不能夠交換使用。

顯示文本三步走戰(zhàn)略：

使用font設(shè)置字體。
使用fillStyle設(shè)置字體顏色。
使用fillText()方法顯示字體。

這里的font屬性可以不指定，如果沒(méi)有指定字體，則默認(rèn)自動(dòng)使用 10px 無(wú)襯線(xiàn)體。

下面的代碼簡(jiǎn)單顯示了一段文本，具體屬性我們放到后面來(lái)說(shuō)。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本文本顯示</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        //1. 使用`font`設(shè)置字體。
        context.font = "50px serif";
        //2. 使用`fillStyle`設(shè)置字體顏色。
        context.fillStyle = "#00AAAA";
        //3. 使用`fillText()`方法顯示字體。
        context.fillText("《CANVAS--Draw on the Web》",50,300);

    };
</script>
</body>
</html>

演示 17-1

運(yùn)行結(jié)果：

基本文本顯示

設(shè)置文本字體`font`

在Canvas中設(shè)置字體樣式非常的容易，font屬性與CSS的設(shè)置字體格式是一樣的，因此只需通過(guò)把與CSS兼容的字符串應(yīng)用到font屬性即可?？梢栽O(shè)置字體的樣式、字體的變體、字體的粗細(xì)、字號(hào)和行高、字體外觀(guān)等。

基本格式如下。

context.font = 
"[font-style] [font-variant] [font-weight] 
[font-size/line-height] [font-family]"

以上五個(gè)參數(shù)均可缺省，各個(gè)參數(shù)間用逗號(hào)隔開(kāi)。

提示：參數(shù)用中括號(hào)[]包裹起來(lái)表示可以缺省。

下面一一來(lái)介紹一下這些參數(shù)值的意義。

font-style

font-style 屬性定義字體的風(fēng)格。

值	描述
normal	默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。
italic	瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。
oblique	瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。

后兩者通常情況下看上去是沒(méi)啥區(qū)別的。但是獲取傾斜效果的方法并不同。italic是使用字體庫(kù)中的斜體字，通常一個(gè)字體庫(kù)是擁有該字體的斜體形式和粗體形式。oblique是直接將字傾斜，如果一個(gè)字體庫(kù)沒(méi)有斜體字那么就不能使用italic，想要獲取傾斜字體只能使用oblique。

font-variant

font-variant 屬性設(shè)置小型大寫(xiě)字母的字體顯示文本，這意味著所有的小寫(xiě)字母均會(huì)被轉(zhuǎn)換為大寫(xiě)，但是所有使用小型大寫(xiě)字體的字母與其余文本相比，其字體尺寸更小。

值	描述
normal	默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。
small-caps	瀏覽器會(huì)顯示小型大寫(xiě)字母的字體。

看下面的一張圖片就知道這屬性啥意思啦。

font-variant

就是這樣，上面一行是使用的默認(rèn)值normal，下面一行使用的是small-caps。效果就是，原本大寫(xiě)的英文字母不變，小寫(xiě)的英文字母變成大寫(xiě)，但是大小不變。

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-small	最小字體。
x-small	較小字體。
small	小字體。
medium	缺省值。
large	大字體。
x-large	較大字體。
xx-large	最大字體。
任意數(shù)值	單位px，代表字號(hào)值。

line-height

line-height 屬性設(shè)置行間的距離（行高）。不允許使用負(fù)值

font-family

font-family 規(guī)定元素的字體系列。

使用`@font-face`自定義字體

HTML5支持常用字體，如果沒(méi)有可以使用@font-face擴(kuò)展字體。但是并不建議使用。

@font-face 能夠加載服務(wù)器端的字體文件，讓客戶(hù)端顯示客戶(hù)端所沒(méi)有安裝的字體。目前支持加載EOT與TTF文件。

示例：代碼過(guò)長(zhǎng)，略。

演示 17-2

font-face

這里的字體是我從國(guó)內(nèi)的一個(gè)網(wǎng)站——[字體下載大寶庫(kù)]()中下載的，蠻不錯(cuò)的，如果大家需要啥字體都可以去看看。我這里下載的字體庫(kù)只有A-Z這26個(gè)大寫(xiě)英文字母，所以遇到小寫(xiě)的自動(dòng)轉(zhuǎn)大寫(xiě)，遇到漢字或者數(shù)字它指定用星星符號(hào)代替。使用了CSS3中的@font-face即可自定義字體，是不是非常的酷。

文本渲染

同繪制矩形一樣，這里“繪制”文本也給出了兩種方法——fillText()與strokeText()。之所以說(shuō)一樣，因?yàn)檫@兩個(gè)方法也可以通過(guò)fillStyle與strokeStyle設(shè)置對(duì)應(yīng)的屬性，之前說(shuō)過(guò)的顏色填充、漸變填充、甚至是圖案填充都是可以的。

fillText()與strokeText()的參數(shù)表是一樣的，接受4個(gè)參數(shù)，分別是String，x，y與maxlen，其中String是指要顯示的字符串，之后x與y是指顯示的坐標(biāo)，最后一個(gè)maxlen是可以缺省的數(shù)值型參數(shù)，代表顯示的最大寬度，單位是像素。如果文本的長(zhǎng)度超過(guò)了這個(gè)maxlen，Canvas就會(huì)將顯示文本橫向壓縮。通常為了保證字體的美觀(guān)，我們不設(shè)置maxlen。

即context.fillText(String,x,y,[maxlen])與context.strokeText(String,x,y,[maxlen])。

下面我們通過(guò)一個(gè)案例來(lái)看看文本渲染的效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本渲染</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        context.beginPath();
        context.font = "50px Verdana";
        var gradient = context.createLinearGradient(0,0,800,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        context.fillStyle = gradient;
        context.strokeStyle = "#00AAAA";
        context.strokeText("airingursb.github.io", 50, 100);
        context.fillText("airingursb.github.io", 50, 200);

        //限制寬度
        context.fillText("airingursb.github.io", 50, 300, 200);

        context.beginPath();
        var img = new Image();
        img.src = "./images/bg1.jpg";
        img.onload = function(){
            var pattern = context.createPattern(img, "repeat");
            context.fillStyle = pattern;
            context.fillText("airingursb.github.io", 50, 400);
        }

        context.beginPath();
        context.fillStyle = "#00AAAA";
        context.fillText("Airing的博客，歡迎訪(fǎng)問(wèn)", 50, 500);
    };
</script>
</body>
</html>

演示 17-3

運(yùn)行結(jié)果：

文本渲染