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 」が同じ表示位置になっています。 左から右にテキストが表示される場合は、今回のように同じ表示位置になりますが、 右から左にテキストが表示される場合は、表示位置が異なります。