ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３７．文字の描画。「canvas」

*最新のIE9が必要です。

当然ですが、キャンバスにも文字を描画することができます。

・font

まずコンテキストのfontにサイズとフォントを指定します。

・fillText

そしてfilltextメソッドでテキストを描画します

引数は（文字列, X座標, Y座標）

となります

今回使用するソースコード

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　//フォントを設定
　　ctx.font = "24px 'ＭＳＰゴシック'";

　　//文字列を描画
　　ctx.fillText("一ノ瀬・弓子・クリスティーナ", 10, 20);
}

これは簡単ですね。

実行結果

コラム：

現代プログラミングの特徴に、C言語にあるポインタや
複雑な書式設定を使わずに文字列を、
分かりやすく手軽に出力できるところです。

プログラミングに慣れていくと、いつしかポインタが欲しくなるのですが
それでも手軽さは便利です。