最新のWeb開発のチュートリアル
 

HTML canvas strokeText() Method

<Canvasオブジェクト

書く"Hello world!" そして"Big smile!" (with gradient)使用して、キャンバス上strokeText()

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScriptを:

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

ctx.font="20px Georgia";
ctx.strokeText("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.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
»それを自分で試してみてください

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
strokeText() 4.0 9.0 3.6 4.0 10.1

Note:のmaxWidthパラメータは、Safariでサポートされていません。


定義と使用法

strokeText()メソッドは、テキスト描画(with no fill)キャンバスに。 テキストのデフォルトの色は黒です。

Tip:使用するフォントのフォントとフォントサイズを指定し、使用するプロパティをstrokeStyle別の色/グラデーションでテキストをレンダリングするプロパティを。

JavaScriptシンタックス: contextstrokeText( text,x,y,maxWidth )

パラメータ値

パラメーター 説明 それを再生します
text キャンバスの上に書き込まれるテキストを指定します。 それを再生します»
x (キャンバスに対して)テキストをペイント開始する場所のx座標 それを再生します»
y (キャンバスに対して)テキストをペイント開始する場所のY座標 それを再生します»
maxWidth 任意。 画素内のテキストの最大許容幅 それを再生します»

<Canvasオブジェクト