ブログデザイン備忘録～canvasによるテキスト描画

1. テキストの描画
2. テキストのスタイル変更
3. テキストの位置調整
4. まとめ

　今回はcanvasとjavascriptを用いてテキストを描画する方法について紹介する。

atatat.hatenablog.com

1. テキストの描画

　canvas要素上にテキストを描画するにはfillText("テキスト",x,y,w)またはstrokeText("テキスト",x,y,w)を用いる。x,yはテキストを描画する開始XY座標、wはテキストを描画する最大幅をオプションで指定できる。またfillTextは塗りつぶした文字、strokeTextは輪郭のみの文字を描画する。以下はfont="30px 'ＭＳゴシック'";としてフォントサイズ大きめに指定して、fillTextとstrokeTextの違いを実行したものになる。

<canvas width="300" height="150" id="canv_text1" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_text1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.font = "30px 'ＭＳ ゴシック'";
    context.fillText("1234abcABCあいう漢字", 20, 50, 200);
    context.strokeText("1234abcABCあいう漢字", 20, 100, 200);
}
</script>

以下の実行結果のようにfillTextの描画は塗りつぶされ、strokeTextは輪郭のみの文字になっていることが確認できる。

2. テキストのスタイル変更

　テキストのデフォルトのスタイルはフォントサイズ10px, フォントの種類 sans-serif, フォント色は黒となっている。まずフォントサイズ、種類を変更するにはfont=" サイズ 'フォント名'";で指定する。またboldやitalicを指定する場合はフォントサイズの前にfont = "bold 14px 'ＭＳ明朝'";のように指定する。以下はテキストを数種類のサイズ、フォント名に変更するコード・実行例を示す。

<canvas width="300" height="150" id="canv_text2" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_text2');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillText("1234abcABCあいう漢字", 20, 40,); //指定なし

    //14px 'ＭＳ ゴシック'の場合
    context.font = "14px 'ＭＳ ゴシック'";
    context.fillText("11234abcABCあいう漢字", 20, 60);

    //14px 'ＭＳ 明朝'の場合
    context.font = "bold 14px 'ＭＳ 明朝'";
    context.fillText("1234abcABCあいう漢字", 20, 90);

    //16px sans-serifの場合
    context.font = "italic bold 16px sans-serif";
    context.fillText("1234abcABCあいう漢字", 20, 120)
}
</script>

フォント色を変更するには、図形と同様にfillTextの場合はfillStyle="カラー名"、stroleTextの場合はstrokeStyle="カラー名"として指定する。

<canvas width="300" height="150" id="canv_text3" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_text3');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle="blue";
    context.font = "30px 'ＭＳ ゴシック'";
    context.fillText("1234abcABCあいう漢字", 20, 50, 200);
    context.strokeStyle="red";
    context.strokeText("1234abcABCあいう漢字", 20, 100, 200);
}
</script>

3. テキストの位置調整

　Word等と同様にテキストの揃え位置を指定することができる。まず左揃え、中央揃えなど左右方向の位置はtextAlignで指定する。オプションとしてはstart,end,left,right,centerを指定することができ、それぞれの位置については下記のコードと実行例で確認できる。

<canvas width="300" height="150" id="canv_text4" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_text4');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.font = "14px 'ＭＳ ゴシック'";
    context.fillText("1234abcABCあいう漢字", 150, 20);
    context.textAlign = "start";
    context.fillText("1234abcABCあいう漢字", 150, 40);
    context.textAlign = "end";
    context.fillText("1234abcABCあいう漢字", 150, 60);
    context.textAlign = "left";
    context.fillText("1234abcABCあいう漢字", 150, 80);
    context.textAlign = "right";
    context.fillText("1234abcABCあいう漢字", 150, 100);
    context.textAlign = "center";
    context.fillText("1234abcABCあいう漢字", 150, 120);
}
</script>

高さ方向の位置を指定するにはtextBaseineを用いて、オプションとしてはtop,middle,bottomがある。それぞれの位置については左右方向のときと同様に下記のコードと実行例で確認できる。

<canvas width="300" height="150" id="canv_text5" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_text5');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.font = "14px 'ＭＳ ゴシック'";

    context.textBaseline = "top";
    context.fillText("1234abcABCあいう漢字(top)", 60, 80);
    context.fillStyle="blue";
    context.textBaseline = "middle";
    context.fillText("1234abcABCあいう漢字(middle)", 60, 80);
    context.fillStyle="red";
    context.textBaseline = "bottom";
    context.fillText("1234abcABCあいう漢字(bottom)", 60, 80);

}
</script>