テキストのスタイルを変更する(font) [html5 の Canvas を使ってみる：第廿七回]

テキストのスタイルを css の font プロパティと同じように指定できるようなので、やってみた。

★html 側

<canvas id="font"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: font で 2 次元描画を行うことの定義
  var c = document.getElementById("font").getContext('2d');

// 斜体、太字、1.5 倍の大きさ、Times New Roman を指定
  c.font = "italic bold 1.5em Times New Roman";
// 「あいうえお abcdefg」という文字を、
// fillText(); で配置
  c.fillText("あいうえお abcdefg", 50, 50);
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5