使用canvas繪製文字
============

* « 前頁
* 次頁 »

`canvas`元素支援在標準 HTML 5 特色以及少許實驗性的 Mozilla 方法和功能上繪製文字。

文字可以包括任何 Unicode 字元，即使用那些超出「基本多文種平面」的字元也可以。

方法概述
----

|  |
| --- |
| `void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth);` |
| nsIDOMTextMetrics `measureText(in DOMString textToMeasure);` |
| `void mozDrawText(in DOMString textToDraw); 
已棄用` |
| `float mozMeasureText(in DOMString textToMeasure);` `已棄用` |
| `void mozPathText(in DOMString textToPath);` |
| `void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);` |
| `void strokeText(in DOMString text, in float x, in float y, [optional] in float maxWidth);` |

屬性
--

|  |  |  |
| --- | --- | --- |
| 屬性 | 型別 | 描述 |
| `font` | `DOMString` | 
 當前的文字樣式被用在繪製文字。該字串使用和
 CSS font（樣式表字型）相同的語法。要改變繪製文字的樣式，只要簡單的改變它的屬性值即可，就像下面展示的，預設的字型是10px（像素）
 sans-serif（字型名稱）

例如:
```

ctx.font = "20pt Arial";
```
 |
| `mozTextStyle` 
已棄用
 | `DOMString` | 由上面的Html5`字型` 屬性取代 |
| `textAlign` | `DOMString` | 當前繪製文字所使用的文字對齊方式。 可使用的值：

left
文字靠左對齊。
right
文字靠右對齊。
center
文字置中對齊。
start

 文字依照行首對齊
 (書寫習慣由左到右的地區就靠左對齊，書寫習慣由右到左的就靠右對齊。).

end
文字依照行尾對齊（書寫習慣由左到右的地區就靠右對齊，書寫習責由右到左的地區就靠左對齊。）

預設的值是 `start`. |
| `textBaseline` | `DOMString` | 當前繪製文字的基線位置 可使用的值：

top
基線在字元區塊的頂部（圖中top of the squre位置）。
hanging（懸掛）

 文字基線在拼音文字頂部的位置（圖中hanging baseline）
 *當前仍未支援；會顯示 **alphabetic**代替。*

middle
文字基線在字元區塊的中間。
alphabetic（拼音文字）
這是一般拼音文字底線的位置。
ideographic（表意文字）

 文字在表意文字（如漢字）底部的位置
 *當前仍未支援；會顯示**alphabetic**代替。*

bottom

 基線在拼音文字下伸部的位置
 這與ideographic的基線位置不同，因為表意文字沒有下伸部


預設使用 `alphabetic`. |

下圖展示了 textBaseline 屬性所支援的各種基線，感謝 WHATWG.

![top of em squre（字元區塊頂部）大致在字型中所有字母的最頂部位置，hanging basline（懸掛基線）則是在一些特殊（較小的,像是「आ」）字母頂部，middle則是在top of em squre（字元區塊頂部和bottom of em squre（字元區塊底部）的中間，alphabetic（拼音文字）的基線位置則是在一般拼音字母如Á，ÿ，f，Ω的底線位置。ideographic（表意文字）的基線在字元的底部位置，bottom of em squre（字元區塊底部）則大致是字型中所有字母的最底部位置。而top and bottom of the bounding box（上下的區域範圍線）則比這些基線都來得更遠，基於字母的高度可能超過字元區塊頂部和底部的範圍。](http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png)

方法
--

### fillText()

繪製文字使用`font`屬性指定的文字樣式，對齊則使用`textAlign`屬性，而指定基線則使用`textBaseline`. 填充文字當前使用`fillStyle`，而`strokeStyle`則被忽略

**備註：** 這個方法在 Gecko 1.9.1 (Firefox 3.5)時引進，且是 HTML 5 標準的一部分.
```

void fillText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
```


##### 參數

`textToDraw`

將文字繪製到文本中。

`x`

繪製位置的 x 座標。

`y`

繪製位置的 y 座標。

`maxWidth`

最大寬度，可選用的；繪製字串最大長度 如果指定此參數，當字串被計算出比這個值更寬，它會自動選擇水平方向更窄的字型（如果有可用的字型或是有可讀的字型可以嵌入當前字型之中），或者縮小字型。

##### 範例


```js
ctx.fillText("Sample String", 10, 50);
```

### measureText()

測量文字。返回一個物件包含了寬度，像素值，所指定的文字會以當前的文字樣式繪製。

**備註：** 這個方法在 Gecko 1.9.1 (Firefox 3.5) 引進，且是 HTML 5 標準的一部分。
```

nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);
```


#### 參數

`textToMeasure`

該字串的像素值。

#### 返回值

`nsIDOMTextMetrics`物件的`width`屬性在繪製時會將數字設定給 CSS 的像素值寬度。

### mozDrawText()

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

繪製文字使用由`mozTextStyle`屬性的文字樣式。文本當前的填充顏色被用來當做文字顏色。

**備註：** 這個方法已經不被建議使用,請使用正式的 HTML 5 方法 `fillText()` and `strokeText()`.
```

void mozDrawText(
   in DOMString textToDraw
);
```


#### 參數

`textToDraw`

將文字繪製到文本。

#### 範例


```js
ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
```


這個範例將文字「Sample String」繪製到畫布（canvas）上。

### mozMeasureText()

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

返回寬度，像素值，指定文字

**備註：** 這個方法已經已宣告棄用，請使用正式的 HTML 5 方法`measureText()`.
```

float mozMeasureText(
  in DOMString textToMeasure
);
```


#### 參數

`textToMeasure`

字串的寬度像素值

#### 返回值

文字的寬度像素值

#### 範例


```js
var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - len) / 2, 0);
ctx.mozDrawText(text);
```


這個範例測量了字串的寬度，接著使用這個資訊將它畫在畫布（canvas）的水平中心。

### mozPathText()

給文字路徑加上外框線，如果你想要的話，它允許你替文字加上框線代替填充它。
```

void mozPathText(
  in DOMString textToPath
);
```


#### 參數

`textToPath`

為當前的文字路徑加上框線

#### Example


```js
ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill();
ctx.stroke();
```


這個範例繪出文字「Sample String」，填充顏色是綠色，外框顏色是黑色。

### mozTextAlongPath()

Adds (or draws) the specified text along the current path.
```

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
```


#### 參數

`textToDraw`

沿著指定路徑繪出文字

`stroke`

如果參數是 `true`（真值），文字會沿著指定路徑繪製。如果 `false`（假值），這個文字則會加入到路徑之中，再沿著當前路徑繪製。

#### 備註

字體不會沿著路徑曲線縮放或變形，反而在彎曲路徑下，字體每次計算都會當成是直線在處理。這可以用來建立一些特殊的效果。

### strokeText()

繪製文字使用`font`屬性指定的文字樣式，對齊則使用`textAlign`屬性，而指定基線則使用`textBaseline`. 當前使用`strokeStyle`來建立文字外框。

**備註：** 這個方法在 Gecko 1.9.1 (Firefox 3.5)時引進，且是 HTML 5 標準的一部分。
```

void strokeText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
```


##### 參數

`textToDraw`

將文字繪製到文本中。

`x`

繪製位置的 x 座標。

`y`

繪製位置的 y 座標

`maxWidth`

最大寬度，可選用的；繪製字串最大長度 如果指定此參數，當字串被計算出比這個值更寬，它會自動選擇水平方向更窄的字型（如果有可用的字型或是有可讀的字型可以嵌入當前字型之中），或者縮小字型。

##### 範例


```js
ctx.strokeText("Sample String", 10, 50);
```

備註
--

* 請見 WHATWG specification 關於 HTML 5 canvas text 的說明。
* 你不需要特別的文本來使用這些功能；2D 的文本就可以執行得很好。
* 所有的繪圖都使用即時變化來完成。