HTMLキャンバステキスト
キャンバスにテキストを描画する
キャンバスにテキストを描画するための最も重要なプロパティとメソッドは次のとおりです。
- 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);
strokeText（）の使用
例
フォントを30px "Arial"に設定し、キャンバスに塗りつぶしなしでテキストを書き込みます。
JavaScript：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
色と中央のテキストを追加
例
フォントを30px「ComicSansMS」に設定し、キャンバスの中央に塗りつぶされた赤いテキストを書き込みます。
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);