例
四角形を描画します。 赤の線の色を使用します。
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
»それを自分で試してみてください ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| strokeStyle | はい | 9.0 | はい | はい | はい |
定義と使用法
strokeStyleプロパティセットやストロークに使用する色、グラデーション、またはパターンを返します。
| デフォルト値： | ＃000000 |
|---|---|
| JavaScriptシンタックス： | context.strokeStyle=color|gradient|pattern; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| color | CSSカラー値描画の線の色を示しています。 デフォルト値は#000000 | それを再生します» |
| gradient | 勾配オブジェクト（ linearまたはradial ）勾配ストロークを作成するために使用しました | |
| pattern | patternオブジェクトは、パターンストロークを作成するために使用します |
その他の例
例
四角形を描画します。 グラデーションのストロークを使用します。
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
»それを自分で試してみてください 例
テキスト書く"Big smile!" 、勾配ストロークに：
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
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,50);
»それを自分で試してみてください