fillText メソッド

この記事が対象とする仕様

	HTML5 HTML構文	◎	対象です。
	HTML5 XHTML構文	◎	対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

canvas要素に内側が塗りつぶされた文字を描画します。

１．構文

void fillText(DOMString text, double x, double y, optional double maxWidth);

パラメーター

text

描画する文字。

描画を開始する位置のX座標。既定ではテキストの開始位置のX座標を示します。この座標の解釈はtextAlignフィールドの設定値によって変わります。詳細は解説を参照して下さい。

描画を開始する位置のY座標。既定ではテキストの下側のY座標を示します。この座標の解釈はtextBaselineフィールドの設定値によって変わります。詳細は解説を参照してください。

maxWidth

省略可能です。指定した場合で文字列の幅がこの値を超過してしまう場合、描画する文字の横幅を縮小してこの値より横幅が大きくならないように調整されます。

２．解説

内側が塗りつぶされた文字を描画します。描画に使用するフォントはfontフィールド指定されているものを使用します。fontフィールドには一部の例外を除きCSSのfontプロパティと同じ内容を設定できます。詳細はCSSFONTを参照してください。フォントの名前は「メイリオ」や「ＭＳ明朝」のような日本語は認識せず「Meiryo」、「MS Mincho」などと書く必要がある点に注意してください。

色やグラデーションなど塗りつぶしのスタイルはfillStyleフィールドで設定します。

xパラメーターが表すX座標とtextAlignフィールドの関係は以下の通りです。

textAlignフィールドの値	xパラメーターが表すX座標の意味
left	文字列の左端のX座標。
right	文字列の右端のX座標。
center	文字列の中央のX座標。
start	文字列の開始位置のX座標。英語や日本語の横書きのように文章を左から右に書くか、ヘブライ語やアラビア語のように右から左に書くかによって開始位置の解釈はことなります。具体的にはcanvas要素のdir属性がltrの場合、文字列の左側のX座標。rtlの場合、文字列の右側のX座標という意味になります。
end	文字列の終了位置のX座標。startど同じ理由でcanvas要素のdir属性がltrの場合、文字列の右側のX座標。rtlの場合、文字列の左側のX座標という意味になります。

yパラメーターが表すY座標とtextBaselineフィールドの関係は以下の通りです。

textBaselineフィールドの値	yパラメーターが表すY座標の意味
top	文字列の上側の座標。これはem領域の上辺に一致します。
hanging	文字列の上の方でtopよりやや下の座標。これはhangingベースラインに一致します。
middle	文字列の中央の座標。これはem領域の中央に一致します。
alphabetic	文字列の下の方の座標。これはalaphabeticベースラインに一致します。多くのアルファベットの下部と一致しますが、小文字のyやgの下がはみ出す位置です。ほとんどの漢字の下部ははみ出します。
ideographic	文字列の下側の座標。これはideographicベースラインに一致します。漢字のほとんどはこの位置に収まります。小文字のyやgなどでは下がはみ出します。
bottom	最下部。これはem領域の下辺に一致します。ほとんどの文字はこの位置より上に描画されます。

実際に描画して位置を示すと以下のようになります。

つまり、fontBaseline = 'top'のときにY座標に100を指定すると、実際の文字列はY座標100より下側に書かれ、同様にfontBaseline='bottom'のときにはY座標100より上側に書かれるということです。

fontBaseline

この結果は下記のようなプログラムを実行して、IE9およびChrome18で確認したものです。CANVAS2Dの仕様の説明とは異なり、topとhanging、alphabeticとideographicは同じ位置を指しているように見えます。これはIE9とChrome18がCANVAS2Dの仕様を完全に実装していないか、または使用したフォントや文字が適切でなかったためか私にはわかりません。

実験に使用したプログラム

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');

g.font = '24pt Meiryo'
g.textBaseline = 'hanging';
g.fillText('Say Üä 日本にほん', 10, 100);

g.fillStyle = 'red';
g.fillRect(10, 100, 300, 1);
g.fillText(g.textBaseline, 400, 100);

３．例

次の例はcanvas要素にHello, Canvas!と書きます。

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.fillText('Hello, Canvas!', 10, 100);

赤い16ポイントの「メイリオ」フォントでCanvasに字を書きます。

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.font = '16pt Meiryo'
g.fillStyle = 'red';
g.fillText('Hello, Canvas!', 10, 100);

グラデーションで塗りつぶした文字を書きます。

グラデーションで文字を書く

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
g.font = '48pt Bold Meiryo'

var gradation = g.createLinearGradient(50, 80, 50, 100);
gradation.addColorStop(0.0, 'lime');
gradation.addColorStop(1.0, 'red');

g.fillStyle = gradation;
g.fillText('花鳥風月', 10, 100);

４．プラットフォーム

HTML5

IE9, Chrome18