HTML5 チュートリアル

HTML5 フォーム

キャンバスに "Hello world" を表示します:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

fillText メソッドは、指定の色で塗りつぶしたテキストを指定します。

色を指定するのに fillStyle 属性を使用します。デフォルトは黒で、fillStyle 属性を指定しない場合に使われます。

fillText メソッドは、4つのパラメータ（text,x,y,maxWidth）をとります。

最初のパラメータは実際のテキストを表します。

次の2つのパラメータは、キャンバスのテキストを配置する x 座標と y 座標を表します。

最後のパラメータは、オプションで、テキストの最大幅を表します。テキストが最大幅よりも大きい場合は、テキストは小さなフォントで表示されます。

JavaScript 構文:	context.fillText(text,x,y,maxWidth);

fillText メソッドは、主要な全ブラウザがサポートしています。

maxWidth パラメータは、Chrome または Safari がサポートしていません

maxWidth パラメータは、Opera では小さなフォントで表示され、Internet Explorer と Firefox では狭いテキストで表示されます。

パラメータ	値	説明	Play it
text	text	キャンバス上に書きだすテキスト	Play it »
x	x-coordinate	テキストを配置するキャンバスの x 座標	Play it »
y	y-coordinate	テキストを配置するキャンバスの y 座標	Play it »
maxWidth	width	任意。テキストの最大許容幅（ピクセルで指定）	Play it »