サイト内検索

stroke() メソッド

構文

context . stroke()

現在のストローク・スタイルを使って、サブパスに線を引きます。

仕様

stroke() メソッドは、lineWidth, lineCap, lineJoin, (適切なら) miterLimit 属性を使って、現在のパスのすべてのサブパスの輪郭を算出し、strokeStyle 属性を使って、結合された輪郭領域を塗りつぶさなければいけません。

サブパスは一筆書きとして描かれるため、その一筆書き処理におけるパスの重なっている部分は、あたかも、それらの結合が描画されたものだったかのように扱われます。

パスは、線や塗りが描画される際に、現在のパスに影響を与えてはいけません。また、シャドー効果、グローバル・アルファ、クリッピング領域、グローバル・コンポジション演算子の対象とされなければいけません。(変形は、パスが生成されるときには影響しますが、描画の際には影響しません。ただし、ストローク・スタイルは描画中に変形の影響を受けます。)

長さがゼロの線のセグメントは、パスの線を描く前に取り除かれなければいけません。空のサブパスは無視されなければいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-stroke

サンプル

strokeメソッドのサンプル

このサンプルでは、lineTo() メソッドを使って三角形のパスを生成し、stroke() メソッドを使って、その三角形を線で描画しています。

/* 三角形を描く */
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 90);
ctx.lineTo(10, 90);
ctx.closePath();
/* 三角形を線で描画 */
ctx.stroke();

[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 ○