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

HTML タグ完全ガイド

HTML canvas strokeText() メソッド

strokeText()はCanvas 2D APIは、指定された(x, y)位置にテキストを描画する方法です。最大値を示す第4引数が提供された場合、テキストは幅に合わせて拡大されます。

オンラインサンプル

strokeText()を使用して、キャンバスにテキスト"基本チュートリアルサイト!"と"ja.oldtoolbag.com!"（グラデーション付き）：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML canvas strokeText() メソッドの使用-基本チュートリアル(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");
var ctx=c.getContext("2d");
ctx.font="20px　Georgia";
ctx.strokeText("基本チュートリアルサイト!",10,50);
ctx.font="30px　Verdana";
//　グラデーションを作成する
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","マゼンタ");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　グラデーションを塗りつぶす
ctx.strokeStyle=gradient;
ctx.strokeText("ja.oldtoolbag.com!10,90);
</script>
</body>
</html>

テストを見てみる‹/›

ブラウザの互換性

IEFirefoxオペラChromeSafari

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

注意：Internet Explorer 8 及びそれ以前のバージョンは <canvas> エレメントをサポートしていません。

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

定義と使用方法

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

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

JavaScript 语法：	context.strokeText(text,x,y,maxWidth);

パラメータ値

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

HTML canvas 参考マニュアル

HTML: <template> タグ