キャンバス上にテキストを描画
キャンバス上にテキストを描画するために、最も重要なプロパティとメソッドは次のとおりです。
- font -テキストのフォントプロパティを定義します
- fillText( text,x,y ) -描く"filled"キャンバスにテキストを
- strokeText( text,x,y ) -キャンバス上にテキストを描画します(no fill)
使用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); »それを自分で試してみてください 色とセンターのテキストを追加します。
例
「コミックなきMSを「30px、キャンバスの中央に満たされた赤いテキストを書くために、フォントに設定します。
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);
»それを自分で試してみてください