canvas
元素支援在標準 HTML 5 特色以及少許實驗性的Mozilla方法和功能上繪製文字。
文字可以包括任何Unicode字元,即使用那些超出“基本多文種平面”的字元也可以。
在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); |
屬性
屬性 | 型別 | 描述 |
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
則被忽略
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()
已正式宣告棄用
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
屬性的文字樣式。文本當前的填充顏色被用來當做文字顏色。
fillText()
and strokeText()
.void mozDrawText( in DOMString textToDraw );
參數
textToDraw
- 將文字繪製到文本。
範例
ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
這個範例將文字“Sample String”繪製到畫布(canvas)上。
mozMeasureText()
已正式宣告棄用
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.
返回寬度,像素值,指定文字
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
來建立文字外框。
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的文本就可以執行得很好。
- 所有的繪圖都使用即時變化來完成。
其它範例
瀏覽器兼容性
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 |