stroke() メソッド
構文
- context .
stroke() -
現在のストローク・スタイルを使って、サブパスに線を引きます。
仕様
stroke() メソッドは、lineWidth, lineCap, lineJoin, (適切なら) miterLimit 属性を使って、現在のパスのすべてのサブパスの輪郭を算出し、strokeStyle 属性を使って、結合された輪郭領域を塗りつぶさなければいけません。
サブパスは一筆書きとして描かれるため、その一筆書き処理におけるパスの重なっている部分は、あたかも、それらの結合が描画されたものだったかのように扱われます。
パスは、線や塗りが描画される際に、現在のパスに影響を与えてはいけません。また、シャドー効果、グローバル・アルファ、クリッピング領域、グローバル・コンポジション演算子の対象とされなければいけません。(変形は、パスが生成されるときには影響しますが、描画の際には影響しません。ただし、ストローク・スタイルは描画中に変形の影響を受けます。)
長さがゼロの線のセグメントは、パスの線を描く前に取り除かれなければいけません。空のサブパスは無視されなければいけません。
原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-stroke
サンプル
このサンプルでは、lineTo() メソッドを使って三角形のパスを生成し、stroke() メソッドを使って、その三角形を線で描画しています。
/* 三角形を描く */ ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(90, 90); ctx.lineTo(10, 90); ctx.closePath(); /* 三角形を線で描画 */ ctx.stroke();
ブラウザ対応状況
| Firefox | Safari | Chrome | Opera | IE | ExplorerCanvas |
|---|---|---|---|---|---|
| 2 ○ | 2 ○ | 1 ○ | 9.2 ○ | 9 ○ | 0002 ○ |
| 3 ○ | 3 ○ | 2 ○ | 9.5 ○ | 3 ○ | |
| 3.5 ○ | 4 ○ | 3 ○ | 10 ○ | ||
| 3.6 ○ | 5 ○ | 6 ○ | 10.60 ○ |