このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CanvasRenderingContext2D: beginPath() メソッド
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.beginPath() はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。
メモ:
新しいサブパス(つまり、現在のキャンバスの状態に一致するサブパス)を作成する場合、 CanvasRenderingContext2D.moveTo() が使用できます。
構文
js
beginPath()
引数
なし。
返値
なし (undefined)。
例
独立したパスの作成
この例では、それぞれが 1 本の直線を含む 2 つのパスを作成します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
beginPath() メソッドがそれぞれの線を引く前に呼び出されるため、それぞれの線は別々な色で描かれます。
js
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();
結果
[フレーム]
仕様書
| Specification |
|---|
| HTML # dom-context-2d-beginpath-dev |
ブラウザーの互換性
Loading...
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.closePath()