HTML Canvas テキスト

キャンバス上にテキストを描画

キャンバス上にテキストを描画するために最も重要な属性とメソッドは：

• font - テキストのフォント属性を定義
• fillText(text,x,y) - キャンバス上に「塗りつぶしの」テキストを描画
• strokeText(text,x,y) - キャンバス上にテキスト（塗りつぶしなし）を描画

fillText()を使用

インスタンス

フォントを「30px Arial」に設定し、キャンバス上に塗りつぶしのテキストを書き込みます：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

自分で試してみる

strokeText()を使用

インスタンス

フォントを「30px Arial」に設定し、キャンバス上にテキストを書き込みます（塗りつぶしなし）：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

自分で試してみる

色を追加してテキストを中央に配置

インスタンス

フォントを「30px Comic Sans MS」に設定し、キャンバス中央に赤いテキストを書き込みます：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

自分で試してみる

も参照してください：

CodeW3C.comの完全なCanvasリファレンスマニュアル