HTML canvas fillText() メソッド

例

fillText() を使用して、キャンバス上に "Hello world!" と "Big smile!" を (グラデーション付きで) 描きます：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
fillText()	Yes	9.0	Yes	Yes	Yes

注: maxWidth パラメータは、Safari 5.1 以前ではサポーとしていません。

定義と用法

fillText() メソッドは、キャンバス上に塗りつぶしテキストを描画します。テキストのデフォルトの色は黒です。.

チップ: フォントとフォントサイズを指定するには font プロパティを使用し、他の色/グラデーションのテキストをレンダリングするためには fillStyle プロパティを使用します。

JavaScript 構文：	context.fillText(text,x,y,maxWidth);

パラメータの値

パラメータ	説明	Play it
text	キャンバス上に書くテキストを指定する	Play it ❯
x	テキストのペイントを開始する（キャンバスに相対的な）x 座標	Play it ❯
y	テキストのペイントを開始する（キャンバスに相対的な）y 座標	Play it ❯
maxWidth	任意。ピクセルによるテキストの許容できる最大幅	Play it ❯

HTML Canvas リファレンス