JavaScript入門[HTML5編]テキストの配置

テキストの配置に関連した命令文

テキストの配置に関連した命令文を見ておきましょう。

context.textAlign

テキストの行揃えを指定します。

start,end,left,right,centerを指定することができます。

context.textBaseline

テキストのベースラインを指定します。

指定できる値に関しては、HTML5.jpを参考になさってください。

テキストの行揃え指定

では実際にテキストの横位置の指定について見てみましょう。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");

ctx.font = "italic 36px Arial"; //フォントにArial,36px,斜体を指定

//行揃えをstart,end,left,right,centerの順に指定して描画
ctx.textAlign = "start";
ctx.fillText("start",180,40);

ctx.textAlign = "end";
ctx.fillText("end",180,80);

ctx.textAlign = "left";
ctx.fillText("left",180,120);

ctx.textAlign = "right";
ctx.fillText("right",180,160);

ctx.textAlign = "center";
ctx.fillText("center",180,200);

//中心に赤線を引く
ctx.beginPath();
ctx.moveTo(180,0);
ctx.strokeStyle = "red";
ctx.lineTo(180,240);
ctx.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

fillText()で指定するX座標（サンプルでは全て180px）に対し、 どう配置されるか確認なさってください。startを指定すると、 日本語のように左から右に書く言語の場合は書き始めの左側に揃えられます。 endなら右揃えになります。

テキストのベースライン指定

続いて縦位置の設定です。指定する座標のどこから書き始められるか確認して下さい。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");

ctx2.font = "italic 36px Arial"; //フォントにArial,36px,斜体を指定
ctx2.textAlign = "left";  //テキストを左揃えにする

//Y座標50pxで、ベースラインにtopとalphabeticを指定して描画
ctx2.textBaseline = "top";
ctx2.fillText("top",20,50);
ctx2.textBaseline = "alphabetic";
ctx2.fillText("alphabetic",160,50);

//Y座標180pxで、ベースラインにmiddleとbottomを指定して描画
ctx2.textBaseline = "middle";
ctx2.fillText("middle",20,180);
ctx2.textBaseline = "bottom";
ctx2.fillText("bottom(gjp)",160,180);

//Y座標50pxと180pxの位置に赤線を引く
ctx2.beginPath();
ctx2.strokeStyle="red";
ctx2.moveTo(0,50);
ctx2.lineTo(360,50);
ctx2.stroke();
ctx2.moveTo(0,180);
ctx2.lineTo(360,180);
ctx2.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

縦位置の関係を確認できたでしょうか？ bottomの所ではg,j,pを追加して、文字の下端と線との関係を判りやすくしています。