我們可以在HTML5 canvas上繪制繪制文字，并且可以設置文字的字體，大小和顏色。
要在canvas上繪制文字，可以通過2D上下文的fillText()函數或strokeText()函數來完成。下面是一個簡單的例子：
- var canvas = document.getElementById("ex1");
- var context = canvas.getContext("2d");
- context.font = "normal 36px Verdana";
- context.fillStyle = "#000000";
- context.fillText("HTML5 Canvas Text", 50, 50);
- context.font = "normal 36px Arial";
- context.strokeStyle = "#000000";
- context.strokeText("HTML5 Canvas Text", 50, 90);
下面的圖片是上面代碼的返回結果：
字體和樣式
當在HTML5 canvas上繪制文字的時候，我們可以設置文字的字體和樣式。我們可以通過一組2D上下文的font屬性來完成這些工作。這些屬性和CSS中設置字體的屬性是兼容的：
- [font style][font weight][font size][font face]
舉例來說，我們可以這樣設置字體：
- context.font = "normal normal 20px Verdana";
對于上面的這些屬性，我們可以有下面的一些可取值：
font style可取值有：
normal
italic
oblique
inherit
font weight可取值有：
normal
bold
bolder
lighter
auto
inherit
100
200
300
400
500
600
700
800
900
font size：字體的尺寸，單位像素。
ont face：字體。例如：verdana, arial, serif, sans-serif, cursive, fantasy, monospace等
需要注意的是，不是所有的瀏覽器都支持所有這些屬性的，實際使用中你需要根據實際情況做一些測試。
繪制文字
當在HTML5 canvas中繪制文字的時候，你可以繪制填充文字，也可以繪制描邊文字。它們分別通過2D上下文的fillText()和strokeText()函數來實現。這兩個函數的定義如下：
- fillText (textString, x, y [,maxWidth]);
- strokeText (textString, x, y [,maxWidth]);
textString是要繪制的文字。
x和y表示文字在canvas上的位置。x參數是文字的X軸坐標，y是文字Y軸坐標，但是它如何在Y軸上定位還要取決于文本的基線。文本的基線會在后面介紹。
maxWidth表示文字在水平方向上的最大寬度。詳細內容接著往下看。
下面是一個示例代碼：
- context.font = "36px Verdana";
- context.fillStyle = "#000000";
- context.fillText("HTML5 Canvas Text", 50, 50);
文本的最大寬度
可選參數maxWidth表示在canvas上繪制文字的時候，文字水平方向上最大的寬度不能大于參數指定的值。如果文本的寬度大于maxWidth指定的值，那么文字的寬度會被壓縮。注意不是被剪裁掉。下面是一個例子，在canvas中繪制兩串相同的文本，但是使用不同的maxWidth屬性：
- context.font = "36px Verdana";
- context.fillStyle = "#000000";
- context.fillText("HTML5 Canvas Text", 50, 50);
- context.fillText("HTML5 Canvas Text", 50, 100, 200);
上面的代碼的返回結果如下，注意第二串文字被壓縮為總寬度200像素：
文字的顏色
文字的填充或描邊顏色是通過2D上下文的fillStyle和strokeStyle屬性來完成的。實現方式和圖形的方式相同。可以參考HTML5 Canvas：繪制矩形中的介紹，這里不再重復。
測量文本的寬度
在2D上下文中有一個函數可以用于測量文本的寬度，返回以像素為單位的結果值。這個函數不能測量高度。這個函數是measureText()。下面是一段示例代碼：
- var textMetrics = context.measureText("measure this");
- var width = textMetrics.width;
通過測量文本的寬度，我們可以知道當前的這些文字是否能夠放在當前的canvas容器中，或者其它一些用途。
文本的基線
文本的基線用于決定如何解釋fillText()和strokeText()函數中的y參數。通俗來講，就是文字在垂直方向上如何定位。注意，在不同的瀏覽器中，這些解釋可能會稍微有一些不同。
可以通過2D上下文的textBaseline屬性來設置文本的基線。
文本基線的語法為：
- ctx.textBaseline=
- "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
下表中列出了文本基線的可取值及其描述。
| 取值 | 描述 |
| top | 文本以文本中最高的字符為基線進行對齊 |
| hanging | 文本的基線是懸停線（hanging baseline）。它和top取值基本相同，多數情況下你可能看不出有什么區別 |
| middle | 文本的基線是文字的中心線 |
| alphabetic | 文本的基線是正常的文字基線 |
| ideographic | 文本的基線是水平方向的字形底部 |
| bottom | 文本以文本中最低的字符為基線進行對齊 |
看了上面的描述大家會一頭霧水。現在舉例來說明。我們使用相同的y值(75)來繪制一串文本但是為每一個文字設置不同的基線值。在圖片中我們繪制一條y=75的執行來表示所有文字的基線。
上面圖片的實現代碼如下：
- context.stokeStyle = "#000000";
- context.lineWidth = 1;
- context.beginPath();
- context.moveTo( 0, 75);
- context.lineTo(500, 75);
- context.stroke();
- context.closePath();
- context.font = "16px Verdana";
- context.fillStyle = "#000000";
- context.textBaseline = "top";
- context.fillText("top", 0, 75);
- context.textBaseline = "hanging";
- context.fillText("hanging", 40, 75);
- context.textBaseline = "middle";
- context.fillText("middle", 120, 75);
- context.textBaseline = "alphabetic";
- context.fillText("alphabetic", 200, 75);
- context.textBaseline = "ideographic";
- context.fillText("ideographic", 300, 75);
- context.textBaseline = "bottom";
- context.fillText("bottom-glyph", 400, 75);
文本對齊
2D上下文的textAlignment屬性用于定義文字在水平方向上如何對齊。換句話來說，就是textAlignment屬性定義繪制文本時文本的x坐標屬性。
textAlignment屬性的語法為：
- ctx.textAlign = "left" || "right" || "center" || "start" || "end";
下表中列出了textAlignment屬性各個取值及其描述。
| 取值 | 描述 |
| start | 文本從x左邊開始繪制 |
| left | 文本從x左邊開始繪制，和start屬性相同 |
| center | x坐標位于文本的中心 |
| end | x坐標位于文本的末尾 |
| right | x坐標位于文本的末尾，和end屬性相同 |
在下面的例子中顯示了textAlignment屬性的各種取值的定位。垂直直線的x坐標為x=250，所有的字的x屬性值也是250，但是它們的textAlignment屬性取值各不相同。
上面的圖片的實現代碼如下：
- context.stokeStyle = "#000000";
- context.lineWidth = 1;
- context.beginPath();
- context.moveTo( 250, 0);
- context.lineTo( 250, 250);
- context.stroke();
- context.closePath();
- context.font = "16px Verdana";
- context.fillStyle = "#000000";
- context.textAlign = "center";
- context.fillText("center", 250, 20);
- context.textAlign = "start";
- context.fillText("start", 250, 40);
- context.textAlign = "end";
- context.fillText("end", 250, 60);
- context.textAlign = "left";
- context.fillText("left", 250, 80);
- context.textAlign = "right";
- context.fillText("right", 250, 100);
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507172250.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。