第五課時：文本 · HTML5 開發

## 第五課時：文本以下方法和屬性用于繪制文本。 * `CanvasRenderingContext2D.fillText()`：在指定位置繪制實心字符。 * `CanvasRenderingContext2D.strokeText()`：在指定位置繪制空心字符。 * `CanvasRenderingContext2D.measureText()`：返回一個 TextMetrics 對象。 * `CanvasRenderingContext2D.font`：指定字型大小和字體，默認值為`10px sans-serif`。 * `CanvasRenderingContext2D.textAlign`：文本的對齊方式，默認值為`start`。 * `CanvasRenderingContext2D.direction`：文本的方向，默認值為`inherit`。 * `CanvasRenderingContext2D.textBaseline`：文本的垂直位置，默認值為`alphabetic`。 `fillText()`方法用來在指定位置繪制實心字符。 ~~~ CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]) ~~~ 該方法接受四個參數。 * `text`：所要填充的字符串。 * `x`：文字起點的橫坐標，單位像素。 * `y`：文字起點的縱坐標，單位像素。 * `maxWidth`：文本的最大像素寬度。該參數可選，如果省略，則表示寬度沒有限制。如果文本實際長度超過這個參數指定的值，那么瀏覽器將嘗試用較小的字體填充。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillText('Hello world', 50, 50); ~~~ 上面代碼在`(50, 50)`位置寫入字符串`Hello world`。注意，`fillText()`方法不支持文本斷行，所有文本一定出現在一行內。如果要生成多行文本，只有調用多次`fillText()`方法。 `strokeText()`方法用來添加空心字符，它的參數與`fillText()`一致。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.strokeText('Hello world', 50, 50); ~~~ 上面這兩種方法繪制的文本，默認都是`10px`大小、`sans-serif`字體，`font`屬性可以改變字體設置。該屬性的值是一個字符串，使用 CSS 的`font`屬性即可。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'Bold 20px Arial'; ctx.fillText('Hello world', 50, 50); ~~~ `textAlign`屬性用來指定文本的對齊方式。它可以取以下幾個值。 * `left`：左對齊 * `right`：右對齊 * `center`：居中 * `start`：默認值，起點對齊（從左到右的文本為左對齊，從右到左的文本為右對齊）。 * `end`：結尾對齊（從左到右的文本為右對齊，從右到左的文本為左對齊）。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'Bold 20px Arial'; ctx.textAlign = 'center'; ctx.fillText('Hello world', 50, 50); ~~~ `direction`屬性指定文本的方向，默認值為`inherit`，表示繼承`<canvas>`或`document`的設置。其他值包括`ltr`（從左到右）和`rtl`（從右到左）。 `textBaseline`屬性指定文本的垂直位置，可以取以下值。 * `top`：上部對齊（字母的基線是整體上移）。 * `hanging`：懸掛對齊（字母的上沿在一根直線上），適用于印度文和藏文。 * `middle`：中部對齊（字母的中線在一根直線上）。 * `alphabetic`：默認值，表示字母位于字母表的正常位置（四線格的第三根線）。 * `ideographic`：下沿對齊（字母的下沿在一根直線上），使用于東亞文字。 * `bottom`：底部對齊（字母的基線下移）。對于英文字母，這個設置與`ideographic`沒有差異。 `measureText()`方法接受一個字符串作為參數，返回一個 TextMetrics 對象，可以從這個對象上面獲取參數字符串的信息，目前主要是文本渲染后的寬度（`width`）。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var text1 = ctx.measureText('Hello world'); text.width // 49.46 ctx.font = 'Bold 20px Arial'; text2.width // 107.78 ~~~ 上面代碼中，`10px`大小的字符串`Hello world`，渲染后寬度為`49.46`。放大到`20px`以后，寬度為`107.78`。