JavaScriptのCanvasを勉強中です。
今回はテキスト（文字）を入れる方法を確認します。
テキストを使う方法
テキストを入れる場合は、「ctx.font」を使います。
ctx.font = '60px serif'
▼ テキストの色の設定
色の設定は図形などと同じです。
ctx.fillStyle = 'black'
▼ テキストの中心の設定
ctx.textAlign = 'center'
他には、"left"や"right"があります。
▼ テキストの高さの設定
ctx.textBaseline = 'middle'
他には、"top"、"hanging"、"alphabetic"などがあります。
▼ テキストの配置
テキストの配置は「ctx.fillText」を使います。
ctx.fillText(
'テキスト',
canvas.width / 2（x軸の位置）,
canvas.height / 2（y軸の位置）
)
比較的に簡単に設定できました。
実例
実際に入れてみました↓
以下がコードです。
ctx.fillStyle = 'black' ctx.font = '60px serif' ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillText( 'JavaScriptのCanvasでテキストを使う', canvas.width / 2, canvas.height / 2 )
あとは、Google Fontsなども試してみようと思います。
