Path2D

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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) の位置を中心とし、半径 rstartAngle から始まり endAngle で終わる円弧をパスに追加します。方向が反時計回りの場合は counterclockwise を指定します(既定では時計回り方向です)。

Path2D.arcTo()

指定された制御点と半径を持つパスに円弧を追加し、最後の点と直線で接続します。

Path2D.ellipse()

(x, y) の位置を中心とし、半径が radiusXradiusY で、 startAngle から始まり endAngle で終わる楕円弧をパスに追加します。方向が反時計回りの場合は counterclockwise を指定します(既定では時計回り方向です)。

Path2D.rect()

位置 (x, y) に widthheight で指定された大きさの長方形のパスを作成します。

Path2D.roundRect()

位置 (x, y) に角丸長方形のパスを作成します。大きさは widthheight で決定され、長方形の角に使用する円弧の半径は radii で決定されます。

仕様書

Specification
HTML
# path2d-objects

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Path2D
Path2D() constructor
addPath
arc
arcTo
bezierCurveTo
closePath
ellipse
lineTo
moveTo
quadraticCurveTo
rect
roundRect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報