主頁 > 知識庫 > 使用HTML5 Canvas API控制字體的顯示與渲染的方法

使用HTML5 Canvas API控制字體的顯示與渲染的方法
熱門標(biāo)簽：西寧智能外呼系統(tǒng)加盟 飛亞外呼系統(tǒng) 貸款電銷人工和機(jī)器人哪個好 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 杭州營銷電銷機(jī)器人供應(yīng)商 電視購物電銷外呼系統(tǒng) 電話機(jī)器人如何 聯(lián)通400電話申請 高德地圖標(biāo)注賓館位置

API簡介
今天我們開始征戰(zhàn)一個全新的內(nèi)容——HTML5 Canvas的文本API！要知道，藝術(shù)家通常同時也是一個書法家，所以我們要學(xué)習(xí)寫字，而且是寫出漂亮的字。是不是很有意思？

好了，先預(yù)告一下Canvas 文本API有哪些。

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

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

看了上面的表格，相信童鞋們以及有了大概的認(rèn)識。這里，我們先說文本的顯示與渲染，用到了font，fillText()與strokeText()。

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

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

1.使用font設(shè)置字體。
2.使用fillStyle設(shè)置字體顏色。
3.使用fillText()方法顯示字體。
這里的font屬性可以不指定，如果沒有指定字體，則默認(rèn)自動使用 10px 無襯線體。

下面的代碼簡單顯示了一段文本

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>基本文本顯示</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的瀏覽器居然不支持Canvas？！趕快換一個吧?。?  
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //1. 使用`font`設(shè)置字體。   
  28.         context.font = "50px serif";   
  29.         //2. 使用`fillStyle`設(shè)置字體顏色。   
  30.         context.fillStyle = "#00AAAA";   
  31.         //3. 使用`fillText()`方法顯示字體。   
  32.         context.fillText("《CANVAS--Draw on the Web》",50,300);   
  33.   
  34.     };   
  35. </script>   
  36. </body>   
  37. </html>  

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

設(shè)置文本字體font
在Canvas中設(shè)置字體樣式非常的容易，font屬性與CSS的設(shè)置字體格式是一樣的，因此只需通過把與CSS兼容的字符串應(yīng)用到font屬性即可。可以設(shè)置字體的樣式、字體的變體、字體的粗細(xì)、字號和行高、字體外觀等。

基本格式如下。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. context.font =    
  2. "[font-style] [font-variant] [font-weight]   
  3. [font-size/line-height] [font-family]"  

以上五個參數(shù)均可缺省，各個參數(shù)間用逗號隔開。

提示：參數(shù)用中括號[]包裹起來表示可以缺省。
下面一一來介紹一下這些參數(shù)值的意義。

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

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

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

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

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

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

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

font-weight
font-weight 屬性設(shè)置文本的粗細(xì)。

值 描述
normal 默認(rèn)值。瀏覽器顯示一個標(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，代表字號值

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

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

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

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

示例：代碼過長，略XD

我這里下載的字體庫只有A-Z這26個大寫英文字母，所以遇到小寫的自動轉(zhuǎn)大寫，遇到漢字或者數(shù)字它指定用星星符號代替。使用了CSS3中的@font-face即可自定義字體，是不是非常的酷。

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

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

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

下面我們通過一個案例來看看文本渲染的效果。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>文本渲染</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.beginPath();   
  28.         context.font = "50px Verdana";   
  29.         var gradient = context.createLinearGradient(0,0,800,0);   
  30.         gradient.addColorStop("0","magenta");   
  31.         gradient.addColorStop("0.5","blue");   
  32.         gradient.addColorStop("1.0","red");   
  33.         context.fillStyle = gradient;   
  34.         context.strokeStyle = "#00AAAA";   
  35.         context.strokeText("airingursb.github.io", 50, 100);   
  36.         context.fillText("airingursb.github.io", 50, 200);   
  37.   
  38.         //限制寬度   
  39.         context.fillText("airingursb.github.io", 50, 300, 200);   
  40.   
  41.         context.beginPath();   
  42.         var img = new Image();   
  43.         img.src = "./images/bg1.jpg";   
  44.         img.onload = function(){   
  45.             var pattern = context.createPattern(img, "repeat");   
  46.             context.fillStyle = pattern;   
  47.             context.fillText("airingursb.github.io", 50, 400);   
  48.         }   
  49.   
  50.         context.beginPath();   
  51.         context.fillStyle = "#00AAAA";   
  52.         context.fillText("Airing的博客，歡迎訪問", 50, 500);   
  53.     };   
  54. </script>   
  55. </body>   
  56. </html>  

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

這里第一行使用的是一般顏色的strokeText()方法，第二行使用的是漸變色的fillText()方法，第三行設(shè)置了maxlen，第四行給字體填充的是紋理圖案，第五行是廣告……

標(biāo)簽：晉中 牡丹江 內(nèi)蒙古 安慶 煙臺 邯鄲 撫州 玉溪

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《使用HTML5 Canvas API控制字體的顯示與渲染的方法》，本文關(guān)鍵詞  使用,HTML5,Canvas,API,控制,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用HTML5 Canvas API控制字體的顯示與渲染的方法》相關(guān)的同類信息！
  • 本頁收集關(guān)于使用HTML5 Canvas API控制字體的顯示與渲染的方法的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章