使用canvas繪製文字

方法概述

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。

方法

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

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

範例

measureText()

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

nsIDOMTextMetrics measureText( in DOMString textToMeasure );

參數

textToMeasure

該字串的像素值。

返回值

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

mozDrawText()

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

void mozDrawText( in DOMString textToDraw );

參數

textToDraw

將文字繪製到文本。

範例

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

mozMeasureText()

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

float mozMeasureText( in DOMString textToMeasure );

參數

textToMeasure

字串的寬度像素值

返回值

文字的寬度像素值

範例

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

mozPathText()

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

void mozPathText( in DOMString textToPath );

參數

textToPath

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

Example

這個範例繪出文字「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

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

範例

備註

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