CanvasRenderingContext2D: stroke() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CanvasRenderingContext2D.stroke() はキャンバス 2D API のメソッドで、現在のあるいは渡されたパスを、現在の線のスタイルで描画します。
線はパスの中央に配置されます。言い換えれば、線の半分は内側に、半分は外側に描かれます。
線は非ゼロワインディングルールを使用して描かれます。すなわち交差したパスは塗りつぶされます。
構文
js
stroke()
stroke(path)
引数
返値
なし (undefined)。
例
>単純な線の矩形
この例では、 rect() メソッドを用いて矩形を作成し、 stroke() を用いてキャンバスに描画しています。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();
結果
パスの再描画
通常、新しく描画するごとに beginPath() を呼び出したくなるはずです。そうしないと、以前のサブパスが現在のパスの一部として残り、 stroke() メソッドを呼び出すたびに描画されることになります。しかし、場合によっては、これは望ましい効果かもしれません。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
このコードは、 1 つ目のパスを 3 回、 2 つ目のパスを 2 回、 3 つ目のパスを 1 回だけ描画します。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 1 つ目のサブパス
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();
// 2 つ目のサブパス
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();
// 3 つ目のサブパス
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();
結果
線の描画と塗りつぶし
パスの描画と塗りつぶしの両方を行う場合、これらの操作を行う順序によって結果が決まります。この例では、左側の正方形は、描画が塗りつぶしよりも上になるように描かれています。右側の四角は、ストロークよりも塗りつぶしが上に来るように描かれています。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 16;
ctx.strokeStyle = "red";
// 塗りつぶしの上にストローク
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();
// ストロークの上に塗りつぶし
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();
結果
仕様書
| Specification |
|---|
| HTML> # dom-context-2d-stroke-dev> |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D