Firefox 3.1のHTML 5対応を検証--Canvas Text APIとCanvas Shadow API

Canvas上のテキストの垂直／水平位置を設定する

　Canvas Text APIで追加されるプロパティのうち、残る2つのプロパティであるtextBaselineとtextAlignは、それぞれテキストの垂直および水平位置を決定するために使用される。

　まずtextBaselineプロパティでは、top、hanging、middle、alphabetic、ideographic、bottomのいずれかを使用してテキストのベースラインを指定できる。デフォルトはalphabeticになっている。HTML 5のドラフトでは、それぞれ図1の位置を表すとしている。

図1 テキストのベースラインの指定（HTML 5のドラフトより引用）

　リスト1は、textBaselineプロパティの値をデフォルト（alphabetic）、top、middleと指定し、それぞれ色を変えて描画した例である。　これをFirefox 3.1 Alpha 1で表示すると図2のようになり、垂直位置が変更されているのがわかる。

　なお、ソースコードの全容は前回の記事「Firefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証」を参照していただきたい。

リスト1 テキストの垂直位置を指定

      // 2Dコンテキストを取得
      var ctx = canvas.getContext('2d');
      var str = "Welcome to the new world, sir.";

      ctx.font = "32px Serif";

      // 直線を描く
      ctx.strokeStyle = "Silver";
      ctx.beginPath();
      ctx.moveTo(0, 40);
      ctx.lineTo(450, 40);
      ctx.closePath();
      ctx.stroke();

      // テキストの描画
      ctx.fillStyle = "Red";
      ctx.fillText(str, 20, 40);

      ctx.textBaseline = "top";
      ctx.fillStyle = "Blue";
      ctx.fillText(str, 20, 40);

      ctx.textBaseline = "middle";
      ctx.fillStyle = "Green";
      ctx.fillText(str, 20, 40);

図2

　水平位置はtextAlignプロパティで指定する。textAlignに指定できる値はstart、end、left、right、centerのいずれかで、これによってテキストのアンカーポイントがインラインボックスのどの位置になるかが決定される。

　例えばleftやstart（かつcanvas要素のdirectionプロパティのコンビューテッド値がltr）ならば左端となり、rightやend（かつcanvas要素のdirectionプロパティのコンビューテッド値がltr）ならば右端、centerならば真ん中となる。デフォルトはstartとなっている。

　リスト2は、textAlignプロパティの値をデフォルト（start）、center、endと指定し、それぞれ色を変えて描画した例である。これをFirefox 3.1 Alpha 1で表示すると図3のようになり、水平位置が変更されているのがわかる。

リスト2 テキストの水平位置を指定

      // 2Dコンテキストを取得
      var ctx = canvas.getContext('2d');
      var str = "Welcome to the new world, sir.";

      ctx.font = "32px Serif";

      // 直線を描く
      ctx.strokeStyle = "Silver";
      ctx.beginPath();
      ctx.moveTo(300, 0);
      ctx.lineTo(300, 140);
      ctx.closePath();
      ctx.stroke();

      // テキストの描画
      ctx.fillStyle = "Red";
      ctx.fillText(str, 300, 40);

      ctx.textAlign = "center";
      ctx.fillStyle = "Blue";
      ctx.fillText(str, 300, 80);

      ctx.textAlign = "end";
      ctx.fillStyle = "Green";
      ctx.fillText(str, 300, 120);

図3