Canvas 2D API のCanvasRenderingContext2D
.beginPath()
メソッドは、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合、このメソッドを呼び出してください。
注: 新しいサブパス (つまり、現在のキャンバスの状態に一致するサブパス) を作成する場合、CanvasRenderingContext2D.moveTo()
を使用できます。
構文
void ctx.beginPath();
例
異なるパスの作成
この例では、それぞれが1本の直線を含む2つのパスを作成します。
HTML
<canvas id="canvas"></canvas>
JavaScript
beginPath()
メソッドはそれぞれの線についての処理開始前に呼ばれるため、各線は別々の色で描かれるでしょう。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 第1のパス
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
// 第2のパス
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
実行結果
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.beginPath の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser
関連情報
- このメソッドを定義しているインターフェース:
CanvasRenderingContext2D
CanvasRenderingContext2D.closePath()