DOM

インターフェイス

Path2D インターフェイス

→●、MS

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Canvas 2D APIのPath2Dインターフェースは、後で CanvasRenderingContext2D オブジェクトで使用されるパスを宣言するために使用されます。CanvasRenderingContext2D インターフェイスの path メソッドは、このインターフェイスにも存在し、必要に応じてキャンバス上で保持および再生できるパスを作成できます。

コンストラクター

new Path2D() ●●

Path2Dコンストラクター。新しい Path2D オブジェクトを作成します。

メソッド

Path2D.addPath() ●

現在のパスにパスを追加します。

Path2D.closePath()

ペン先を現在のサブ パスの先頭に戻します。現在のポイントから開始点まで直線を引こうとします。 シェイプがすでに閉じているか、ポイントが1つしかない場合、この関数は何もしません。
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

Path2D.moveTo()

新しいサブ パスの開始点を (x,y) 座標に移動します。

Path2D.lineTo()

サブ パスの最後のポイントを x、y 座標に直線で接続します。

Path2D.bezierCurveTo()

パスに3次ベジェ曲線を追加します。3点必要です。最初の2つのポイントはコントロール ポイントで、3番目のポイントはエンド ポイントです。開始点は、現在のパスの最後の点です。これは、ベジェ曲線を作成する前に moveTo() を使用して変更できます。

Path2D.quadraticCurveTo()

2次ベジェ曲線を現在のパスに追加します。

Path2D.arc()

半径 r が startAngle で始まり、endAngle で終わり、指定された方向に反時計回り（デフォルトは時計回り）に進む、(x,y) 位置を中心とするパスに円弧を追加します。

Path2D.arcTo()

指定されたコントロール ポイントと半径でパスに円弧を追加し、前のポイントに直線で接続します。

Path2D.ellipse()

(x,y) 位置を中心とするパスに楕円を追加します。半径 radiusX と radiusY は、startAngle で始まり、endAngle で終わり、指定された方向に反時計回り（デフォルトは時計回り）に進みます。

Path2D.rect()

幅と高さによって決定されるサイズで、位置 (x,y) に長方形のパスを作成します。

テスト