HTML canvas fillText()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

fillText() を使用して、キャンバスにテキスト "Hello world!" と "Big smile!" を書きます：

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は fillText() メソッドをサポートしています。

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

注意：Safari は maxWidth パラメータをサポートしていません。

定義と使い方

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

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

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

パラメータ値

パラメータ 説明
text キャンバスに出力するテキストを指定します。
x テキストの描画を開始する x 座標位置（キャンバスに対する相対位置）。
y テキストの描画を開始する y 座標位置（キャンバスに対する相対位置）。
maxWidth オプション。許容される最大テキスト幅（ピクセル単位）。

Canvas 对象参考手册Canvas オブジェクト

その他の拡張