HTMLキャンバスfillText()メソッド

HTML5 Canvas 参考手册

定義と使用法

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

ヒント：使用してください font 属性を使用して、フォントとサイズを定義し、 fillStyle テキストを別の色/グラデーションでレンダリングする属性

例

fillText()メソッドを使用して、キャンバス上にテキスト「Hello world!」と「codew3c.com」を書きます：

ブラウザはHTML5キャンバスタグをサポートしていません。

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";
// グレードIENTの作成
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 渐变で色を塗りつける
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

実際に試してみる

構文

context.fillText(text,x,y,maxWidth);

引数値

引数 説明
text キャンバス上に表示するテキストを指定します。
x テキストを描画開始する x 座標位置（キャンバスに対して）。
y テキストを描画開始する y 座標位置（キャンバスに対して）。
maxWidth 任意。最大のテキスト幅、ピクセル単位で指定されます。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 以前のバージョンでは <canvas> 要素をサポートしていません。

HTML5 Canvas 参考手册