テキストの最大表示幅(MaxWidth)を指定する(fillText・strokeText) [html5 の Canvas を使ってみる：第廿五回]

fillText(); と strokeText(); の第四引数を記述すると、記述したテキストの最大表示幅を指定することができる。

★html 側

<canvas id="maxWidth"></canvas>

★Javascript 側

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

// 「0123456789」という文字を、
// fillText(); で配置
  c.fillText("0123456789", 50, 50);

// fillText(); で配置する際に、
// 第四引数として最大 50px の幅を指定
  c.fillText("0123456789", 50, 70, 50);

// 「0123456789」という文字を、
// strokeText(); で配置
  c.strokeText("0123456789", 50, 90);

// strokeText(); で配置する際に、
// 第四引数として最大 50px の幅を指定
  c.strokeText("0123456789", 50, 110, 50);
}

すると、こうなる。テキストの配置座標と、そこから x 軸に 50px の場所を通る、y 軸に平行な補助線をついでに引いてみた。


確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 4.0.4、Chrome 5.0.307.11

W3C；
4.8.11 The canvas element — HTML 5