HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas fillText() メソッド

fillText()はCanvas 2D API は (x, y)位置にテキストを埋める方法です。オプションの第4引数が最大幅を提供している場合、テキストは最大幅に合わせてスケーリングされます。

オンラインサンプル

fillText()を使用して、テキスト"基础教程网!"と"oldtoolbag.com!"：

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML canvas fillText() メソッドの使用-基础教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTML5　canvasタグ。
</canvas>
<script>
var c=document.getElementById("myCanvas");
2d
ctx.font="20px　Georgia"
ctx.fillText("基础教程网!",10,50);
ctx.font="30px　Verdana"
//　線形渐变を作成します
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("w"3codebox.com!10,90);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxオペラChromeChrome

メソッド。 9Safari 、Firefox、Opera、Chrome および Safari が fillText() をサポート。

及びその以前のバージョンでは <canvas> タグをサポートしていません。メソッド。 8 Internet Explorer

及びその以前のバージョンでは <canvas> タグをサポートしていません。注意：

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

定義と使用方法

fillText() メソッドはキャンバス上に塗りつぶしテキストを描画します。テキストのデフォルトの色は黒(#000000)です。ヒント：次のように使用してください。 font 属性でフォントとサイズを定義し、 fillStyle/テキストを別の色でレンダリングするためのグラデーションを使用。

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

パラメータの値

パラメータ	説明
text	キャンバス上に表示するテキストを指定。
x	キャンバスに対するテキストの描画開始の x 座標位置。
y	キャンバスに対するテキストの描画開始の y 座標位置。
maxWidth	任意。最大のテキスト幅（ピクセルで計算）。

HTML canvas 参考マニュアル

HTML: <template> タグ