使用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 |
當前繪製文字所使用的文字對齊方式。 可使用的值:
預設的值是 |
textBaseline |
DOMString |
當前繪製文字的基線位置 可使用的值:
預設使用 |
下圖展示了 textBaseline 屬性所支援的各種基線,感謝 WHATWG。
方法
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()
已棄用: 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它,但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能,盡可能更新現有程式;請參考頁面底部的相容性表格來下決定。請注意:本功能可能隨時停止運作。
繪製文字使用由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 規範關於 HTML 5 canvas text 的說明。
- 你不需要特別的文本來使用這些功能;2D 的文本就可以執行得很好。
- 所有的繪圖都使用即時變化來完成。