Path2D

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.

Path2D は Canvas 2D API のインターフェイスで、CanvasRenderingContext2D オブジェクトで使用できるパスを宣言するために使用します。CanvasRenderingContext2D インターフェイスのパスメソッドもこのインターフェイスにあり、必要な時にいつでもパスを保持して再生できるので便利です。

コンストラクター

Path2D(): Path2D コンストラクターです。新しいPath2D オブジェクトを生成します。

インスタンスメソッド

Path2D.addPath(): パスを現在のパスに追加します。
Path2D.closePath(): ペンの点を現在のサブパスの開始点に戻します。現在の点から開始点まで直線を引こうとします。シェイプが既に閉じられていたり、点が 1 つしかなかったりする場合、この関数は何もしません。
Path2D.moveTo(): 新しいサブパスの始点を (x, y) 座標に移動します。
Path2D.lineTo(): サブパスの最後の点から (x, y) 座標まで直線を引きます。
Path2D.bezierCurveTo(): パスに 3 次ベジェ曲線を追加します。これには 3 つの点が必要です。最初の 2 点は制御点であり、 3 点目は終点です。始点は現在のパスの最後の点であり、ベジェ曲線を作成する前にmoveTo() を用いて変更することができます。
Path2D.quadraticCurveTo(): 現在のパスに 2 次ベジェ曲線を追加します。
Path2D.arc(): (x, y) の位置を中心とし、半径r でstartAngle から始まりendAngle で終わる円弧をパスに追加します。方向が反時計回りの場合はcounterclockwise を指定します（既定では時計回り方向です）。
Path2D.arcTo(): 指定された制御点と半径を持つパスに円弧を追加し、最後の点と直線で接続します。
Path2D.ellipse(): (x, y) の位置を中心とし、半径がradiusX とradiusY で、startAngle から始まりendAngle で終わる楕円弧をパスに追加します。方向が反時計回りの場合はcounterclockwise を指定します（既定では時計回り方向です）。
Path2D.rect(): 位置 (x, y) にwidth とheight で指定された大きさの長方形のパスを作成します。
Path2D.roundRect(): 位置 (x, y) に角丸長方形のパスを作成します。大きさはwidth とheight で決定され、長方形の角に使用する円弧の半径はradii で決定されます。