テキストを描画する

HTML5でCanvasへテキストを描画する方法について勉強するね!!。

テキストの描画は、ctx.filltext関数で行います。

書式 - filltext

    ctx.filltext( "テキスト", x, y [, maxWidth] );

"テキスト"の部分には、描画したいテキストの内容を指定します。xとyは、テキストを描画開始するx座標、y座標を指定します。maxWidthは省略可能で、テキストを描画する際の最大幅を指定します。 maxWidthについては、後で詳しく説明するね!!。

では、実際にテキストを描画してみましょう。

    ctx.font = "48px Meiryo";
    ctx.fillStyle = "#0000ff";
    ctx.fillText( "Happy Smile", 50, 30 );

フォントは、"Meiryo"で、文字の高さは48px
テキストの色は青色
描画内容は"Happy Smile"
描画位置は、x座標が50、y座標が30

描画されました．．．．あれ！？でも文字がはみ出ていますね。

実は、filltextで指定した描画開始座標のy座標は、何も指定しないと文字のbaselineの位置から描画されます。指定した文字の高さが48pxに対して、y座標が30だったので上方向へはみ出てしまいました。

（赤色の線と緑色の線が交差している位置が、x座標が50、y座標が30の位置です）

今度は、もう少しy座標を増やしてを描画してみましょう。

    ctx.font = "48px Meiryo";
    ctx.fillStyle = "#0000ff";
    ctx.fillText( "Happy Smile", 50, 50 );

フォントは、"Meiryo"で、文字の高さは48px
テキストの色は青色
描画内容は"Happy Smile"
描画位置は、x座標が50、y座標が50

今度は、画面内に収まるように描画されました。

テキストの描画はうまくいきましたが、文字の描画開始位置がbaselineの位置では、ちょっと使いにくいと感じたのでは無いでしょうか。

実は、filltextで指定する描画開始座標を文字のどの位置にするかは、水平方向、垂直方向ともに指定することができるんだよ!!。

まずは、垂直方向から説明するね。垂直方向の描画開始位置を指定するには、ctx.textBaseline属性を設定します。何も指定しないと、textBaseline属性は"alphabetic"になっています。

書式 - textBaseline

    ctx.textBaseline = "キーワード";

キーワードと文字の垂直位置の関係

w3cの原文

キーワード	位置
top	top of em square
hanging	hanging baseline
middle	middle
alphabetic	alphabetic baseline
ideographic	ideo graphic baseline
bottom	bottom of em Square

それぞれの位置で描画すると、垂直位置はこんな感じになるよ。 "Happy Smile"が指定したy座標(赤い線)に対して描画される位置が変化していることに着目してね!!。

一般的で扱いやすいのは、やっぱり"top"だよね。でも、せっかく選択できるので、覚えておいて色々なケースで使い分けてね!!。

こんどは、水平方向を説明するね。水平方向の描画開始位置を指定するには、ctx.textAlign属性を設定します。何も指定しないと、textAlign属性は"start"になっています。

書式 - textAlign

    ctx.textAlign = "キーワード";

キーワード	位置
start	テキストの進む方向の先頭
end	テキストの進む方向の終端
left	テキストの左端
center	テキストの中心
right	テキストの右端

startとendは、テキストの進む方向に対して決定されます。横書きで左から右に進む場合は、startは左端、endは右端になります。縦書きの文章の場合で、上から下に進む場合は、startは上端、endは下端になります。

それぞれの位置で描画すると、水平位置はこんな感じになるよ。

縦書きなどを意識しなければ、"left"が一般的かな？

それでは、filltextの４つ目の引数の"maxWidth"について説明するね!!。

maxWidthは、テキストを描画する際の最大幅を指定します。filltext関数は、テキストを描画する際にmaxWidthで指定した幅を超えて描画することはありません。テキストの幅がmaxWidthよりも小さい場合は、拡大されることは無く何もしません。

では、動作を見てみましょう。

    ctx.font = "bold 48px Meiryo";
    ctx.fillStyle = "#0000c0";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText( "Happy Smile", 0, 0 );
    ctx.fillText( "Happy Smile", 0, 60, 240 );
    ctx.fillText( "Happy Smile", 0, 120, 120 );