HTML5 canvas静止描画方法(文字)

前回の続きで、HTML5の新要素であるcanvas。
今回はテキストの表示について。

 

作ったデモサイト

こんな感じです。
 

共通の書き方

<canvas id="canvas0" width="500" height="500">
</canvas>

width, heightで描画範囲を規定。

 

テキスト

	var canvas = document.getElementById("canvas");
	var c = canvas.getContext("2d");

	c.fillStyle = "blue";
	c.font = "100px serif";
	c.fillText("Canvas", 75, 300);

「document.getElementById(“canvas”)」でid要素を取得して変数に格納します。
「canvas.getContext(“2d”)」でその要素の2次元描画コンテクストを取得します。

.fillStyleで線の色を指定します。
.font = “文字の大きさ 文字フォント”;で文字の大きさとフォントを指定します。

 

以上