Path2D - 用于声明一个路径

Path2D 是 Canvas 2D API 的接口，用于声明一个路径，然后可以在 CanvasRenderingContext2D 对象上使用该路径。该接口上还提供了 CanvasRenderingContext2D 接口的 path 方法，这使您能够在需要时保留并重播路径。

构造函数

Path2D()

Path2D 构造函数。创建一个新的 Path2D 对象。

方法

Path2D.addPath()

将路径添加到当前路径。

Path2D.closePath()

使笔尖移回当前子路径的起点。它试图从当前点到起点画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。

Path2D.moveTo()

将新子路径的起点移动到（x, y）坐标。

Path2D.lineTo()

用一条直线将子路径中的最后一个点连接到（x, y）坐标。

Path2D.bezierCurveTo()

将三次贝塞尔曲线添加到路径。它需要三点。前两个点是控制点，第三个点是终点。起点是当前路径中的最后一点，可以在创建贝塞尔曲线之前使用 moveTo() 进行更改。

Path2D.quadraticCurveTo()

将二次贝塞尔曲线添加到当前路径。

Path2D.arc()

在以（x, y）位置为中心的路径上添加一条弧，圆弧半径 r，从 startAngle 开始到 endAngle 沿给定的方向 anticlockwise（逆时针）旋转（默认为顺时针）。

Path2D.arcTo()

在具有给定控制点和半径的路径上添加圆弧，并通过一条直线将其连接到上一个点。

Path2D.ellipse()

向以（x, y）位置为中心的路径添加一个椭圆弧，半径为 radiusX 和 radiusY，从 startAngle 开始到 endAngle 沿给定的方向 anticlockwise （逆时针）旋转（默认为顺时针方向）。

Path2D.rect()

为矩形位置（x, y）创建一个路径，该路径的大小由 width 和 height 确定。

规范

规范	状态	备注
HTML Living Standard Path2D 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

1. Edge 中 Path2D 对象的构造函数不支持使用包含 SVG 路径数据的字符串来调用。有关详细信息，请参见 问题 8438884。

相关链接

• CanvasRenderingContext2D