HTML5 チュートリアル

HTML5 フォーム

strokeText() メソッドを使用して、キャンバスに "Hello World" を記述します:

JavaScript:

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

strokeText メソッドは、キャンバス上のテキストを指定し、指定した色で描画します。

strokeText メソッドは、"ボーダー"のみで、文字を色で塗潰すことはありません。

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

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

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

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

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

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

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

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 »