--- title: 使用canvas繪製文字 slug: Web/API/Canvas_API/Tutorial/Drawing_text translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

{{ gecko_minversion_header("1.9") }}

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

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

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

方法概述

void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth); {{ gecko_minversion_inline("1.9.1") }}
nsIDOMTextMetrics measureText(in DOMString textToMeasure); {{ gecko_minversion_inline("1.9.1") }}
void mozDrawText(in DOMString textToDraw); {{ deprecated_inline() }}
float mozMeasureText(in DOMString textToMeasure); {{ deprecated_inline() }}
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); {{ gecko_minversion_inline("1.9.1") }}

 

屬性

屬性 型別 描述
font {{ gecko_minversion_inline("1.9.1") }} DOMString

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

例如:

ctx.font = "20pt Arial";
mozTextStyle {{ deprecated_inline() }} DOMString

由上面的Html5字型 屬性取代
textAlign {{ gecko_minversion_inline("1.9.1") }} DOMString

當前繪製文字所使用的文字對齊方式。  可使用的值：

left
文字靠左對齊。
right
文字靠右對齊。
center
文字置中對齊。
start
文字依照行首對齊 (書寫習慣由左到右的地區就靠左對齊，書寫習慣由右到左的就靠右對齊。).
end
文字依照行尾對齊（書寫習慣由左到右的地區就靠右對齊，書寫習責由右到左的地區就靠左對齊。）

預設的值是 start.
textBaseline {{ gecko_minversion_inline("1.9.1") }} 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（上下的區域範圍線）則比這些基線都來得更遠，基於字母的高度可能超過字元區塊頂部和底部的範圍。

方法

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

{{ deprecated_header() }}

繪製文字使用由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()

{{ deprecated_header() }}

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

注意：這個方法已經已宣告棄用，請使用正式的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);

備註