テキストの方向を指定する(textAlign) [html5 の Canvas を使ってみる：第廿六回]

textAlign を使って、テキストの方向を指定できるので、やってみる。

★html 側

<canvas id="textAlign"></canvas>

★Javascript 側

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

// 「テキストを書いてみる」という文字を、
// x:100、y:50 の座標に fillText(); で配置
  c.fillText("テキストを書いてみる", 100, 50);

// テキストの方向を左（left）に指定する
  c.textAlign = "left";
// 「テキストを書いてみる」という文字を、
// x:100、y:70 の座標に fillText(); で配置
  c.fillText("テキストを書いてみる", 100, 70);

// テキストの方向を開始地点（start）に指定する
  c.textAlign = "start";
// 「テキストを書いてみる」という文字を、
// x:100、y:90 の座標に fillText(); で配置
  c.fillText("テキストを書いてみる", 100, 90);
}

座標が判るように、X:100 の y 軸と平行な補助線を引いてみた。


left 値を right 値へ、start 値を end 値へ変えてみる。

// テキストの方向を右（right）に指定する
  c.textAlign = "right";
  c.fillText("テキストを書いてみる", 100, 70);

// テキストの方向を最終地点（end）に指定する
  c.textAlign = "end";
  c.fillText("テキストを書いてみる", 100, 90);

ごちゃ混ぜにしてみる。値は上から left、right、start、end、left にしている。


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

W3C；
4.8.11 The canvas element — HTML 5