strokeRect() メソッド
構文
- context .
strokeRect(x, y, w, h) -
canvas 上の指定された矩形の輪郭となるボックスを、現在の輪郭描画スタイルを使って、描きます。
仕様
矩形をビットマップに即座に描画するメソッドが 3 つあります。それぞれ 4 つの引数をとります。最初の 2 つには、矩形の左上端の x 座標と y 座標を与えます。次の 2 つには、矩形の幅 w と 高さ h を与えます。
現在の変形マトリックスは、次の 4 つの座標に適用されません。これらの座標は、指定された矩形を取得するために閉じられるパスを形成します: (x, y), (x+w, y), (x+w, y+h), (x, y+h)。
現在のパスに影響を与えることなく、形状が描画されます。そして、この形状は、クリッピング領域の対象となります。clearRect()は除きますが、シャドー効果、グローバル・アルファ、グローバル・コンポジション演算子の対象にもなります。
strokeRect(x, y, w, h) メソッドは、strokeStyle, lineWidth, lineJoin, (適切なら) miterLimit 属性を使って、指定された矩形のパスの輪郭を描かなければいけません。高さと幅がいずれも 0 なら、このメソッドは何も作用しません。なぜなら、輪郭を描くパスがないからです。2 つのうち 1 つが 0 なら、このメソッドは代わりに線を描くでしょう（輪郭のパスは 0 ではない寸法に沿った直線になるからです）。
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-strokerect
サンプル
このサンプルでは、strokeStyle プロパティで赤色を定義したうえで、strokeRect() メソッドを使って矩形の輪郭を描いています。
ctx.strokeStyle = "rgb(200, 0, 0)";
ctx.strokeRect(20, 30, 60, 40);
strokeRect() メソッドで描かれる矩形はパスではありません。そのため、beginPath() メソッドや 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 ○ |