JavaScript: canvas にテキストを描画する

HTML5 Canvas API を使って、テキストを描画します。

テキストを描画するには strokeText() メソッドや fillText() メソッドを使用します。

テキストの枠線のみ描画する場合はstrokeText() メソッド、 テキストを塗りつぶす場合は fillText() メソッドを使います。

両メソッドの構文は次の通りです。


strokeText(テキスト, x, y)

fillText(テキスト, x, y)

サンプルコード: テキストを描画する

HTML・CSS


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

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

var str = 'テキスト';
c.strokeStyle = 'red';              // 枠線の色
c.fillStyle = 'green';              // 塗りつぶしの色
c.font = 'italic bold 35px serif';  // フォント
c.textAlign = 'left';               // 配置
c.strokeText(str, 10, 50);
c.fillText(str, 100, 100);

枠線のみのテキストを描画するには strokeText() メソッド、 塗りつぶしのテキストを描画するには fillText() メソッドを使用します。

枠線の色は strokeStyle プロパティ、塗りつぶしの色は fillStyle プロパティで指定します。

フォントを指定するには font プロパティを使用します。 CSSでの指定と同じように指定し、 順番はfont-style、font-weight、font-size、font-family の順に指定します。 font-size と font-family は必須です。

テキストの横方向の配置を指定するには textAlign プロパティを使用します。 指定できる値には 'left'、'center'、'right'、'start'、'end'があります。

次のサンプルでは、textAlign プロパティの値の違いについて見てみます。

サンプルコード: textAlign による描画位置の違い

HTML・CSS は省略します。

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// 中央線
c.strokeStyle = 'silver';
c.beginPath();
c.moveTo(150, 0);
c.lineTo(150, 150);
c.stroke();

// テキスト
c.fillStyle = 'green';              // 塗りつぶしの色
c.font = 'bold 25px serif';         // フォント
c.textAlign = 'left';               // left
c.fillText('left', 150, 20);
c.textAlign = 'center';             // center
c.fillText('center', 150, 50);
c.textAlign = 'right';              // right
c.fillText('right', 150, 80);
c.textAlign = 'start';              // start
c.fillText('start', 150, 110);
c.textAlign = 'end';                // end
c.fillText('end', 150, 140);

今回のサンプルはtextAligh プロパティ値の違いによる、 描画位置の違いを表しています。

canvas 要素の中央に線を引いて、 fillText() メソッドの x 座標をすべて中央の 150 にしています。

結果的に「left と start」、「right と end 」が同じ表示位置になっています。 左から右にテキストが表示される場合は、今回のように同じ表示位置になりますが、 右から左にテキストが表示される場合は、表示位置が異なります。

JavaScript入門