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

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

方法概述

屬性

ctx.font = "20pt Arial";

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

方法

fillText()

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

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

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

nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);

參數

textToMeasure

該字串的像素值。

返回值

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

mozDrawText()

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

void mozDrawText(
   in DOMString textToDraw
);

參數

textToDraw

將文字繪製到文本。

範例

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

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

mozMeasureText()

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

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來建立文字外框。

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!