HTML Canvas テキスト

キャンバスへのテキスト描画

キャンバスにテキストを描画するには、最も重要なプロパティとメソッドは次のとおりです：

font - テキストのフォントプロパティを定義する
fillText(text,x,y) - キャンバスに「塗潰し」テキストを描画する
strokeText(text,x,y) - キャンバスにテキストを描画する（塗潰しなし）

fillText() の使用

例

フォントに 30px "Arial" を設定し、キャンバスに塗潰しテキストを書き出します：

JavaScript:

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

Try it Yourself »

strokeText() の使用

例

フォントに 30px "Arial" を設定し、キャンバスに塗潰しなしテキストを書き出します：

JavaScript:

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

Try it Yourself »

色の追加とテキストの中央揃え

例

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

JavaScript:

var canvas = document.getElementById("myCanvas");
var 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);

Try it Yourself »

❮ 前章へ次章へ ❯