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