使用canvas繪製文字

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

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

Firefox 3.5 note (en-US)

在Firefox 3.5或之後的版本，當繪圖時，任何對於 shadow effects（陰影效果）的處理可以使用在文字上。

方法概述

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);

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（上下的區域範圍線）則比這些基線都來得更遠，基於字母的高度可能超過字元區塊頂部和底部的範圍。

方法

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

範例

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()

已正式宣告棄用

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

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

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

void mozDrawText(
   in DOMString textToDraw
);

參數

textToDraw: 將文字繪製到文本。

範例

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

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

mozMeasureText()

已正式宣告棄用

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

注意：這個方法已經已宣告棄用，請使用正式的HTML 5方法measureText().

float mozMeasureText(
  in DOMString textToMeasure
);

參數

textToMeasure: 字串的寬度像素值

返回值

文字的寬度像素值

範例

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

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

範例

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

備註

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

其它範例

瀏覽器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1+	3.5+	9.0	10.5	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	?	9.0	11.0	3.2

屬性	型別	描述
`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`.