Path2D
Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。
支持情况：
方法
addPath
添加路径到当前路径。
支持情况：
(path: Path2D) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| path | Path2D | 添加的 Path2D 路径 |
arc
添加一段圆弧路径
支持情况：
(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise: boolean) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 圆心横坐标 |
| y | number | 圆心纵坐标 |
| radius | number | 圆形半径，必须为正数 |
| startAngle | number | 圆弧开始角度 |
| endAngle | number | 圆弧结束角度 |
| counterclockwise | boolean | 是否逆时针绘制。如果传 true, 则会从 endAngle 开始绘制到 startAngle |
arcTo
通过给定控制点添加一段圆弧路径
支持情况：
(x1: number, y1: number, x2: number, y2: number, radius: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x1 | number | 第一个控制点横坐标 |
| y1 | number | 第一个控制点纵坐标 |
| x2 | number | 第二个控制点横坐标 |
| y2 | number | 第二个控制点纵坐标 |
| radius | number | 圆形半径，必须为非负数 |
bezierCurveTo
添加三次贝塞尔曲线路径
支持情况：
(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| cp1x | number | 第一个控制点横坐标 |
| cp1y | number | 第一个控制点纵坐标 |
| cp2x | number | 第二个控制点横坐标 |
| cp2y | number | 第二个控制点纵坐标 |
| x | number | 结束点横坐标 |
| y | number | 结束点纵坐标 |
closePath
闭合路径到起点
支持情况：
() => void
ellipse
添加椭圆弧路径
支持情况：
(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise: boolean) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 椭圆圆心横坐标 |
| y | number | 椭圆圆心纵坐标 |
| radiusX | number | 椭圆长轴半径，必须为非负数 |
| radiusY | number | 椭圆短轴半径，必须为非负数 |
| rotation | number | 椭圆旋转角度 |
| startAngle | number | 圆弧开始角度 |
| endAngle | number | 圆弧结束角度 |
| counterclockwise | boolean | 是否逆时针绘制。如果传 true, 则会从 endAngle 开始绘制到 startAngle |
lineTo
添加直线路径
支持情况：
(x: number, y: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 结束点横坐标 |
| y | number | 结束点纵坐标 |
moveTo
移动路径开始点
支持情况：
(x: number, y: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 横坐标 |
| y | number | 纵坐标 |
quadraticCurveTo
添加二次贝塞尔曲线路径
支持情况：
(cpx: number, cpy: number, x: number, y: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| cpx | number | 控制点横坐标 |
| cpy | number | 控制点纵坐标 |
| x | number | 结束点横坐标 |
| y | number | 结束点纵坐标 |
rect
添加方形路径
支持情况：
(x: number, y: number, width: number, height: number) => void
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 开始点横坐标 |
| y | number | 开始点纵坐标 |
| width | number | 方形宽度，正数向右，负数向左 |
| height | number | 方形高度，正数向下，负数向上 |
API 支持度
| API | 微信小程序 | H5 | React Native | Harmony |
|---|---|---|---|---|
| Path2D | ✔️ | |||
| Path2D.addPath | ✔️ | |||
| Path2D.arc | ✔️ | |||
| Path2D.arcTo | ✔️ | |||
| Path2D.bezierCurveTo | ✔️ | |||
| Path2D.closePath | ✔️ | |||
| Path2D.ellipse | ✔️ | |||
| Path2D.lineTo | ✔️ | |||
| Path2D.moveTo | ✔️ | |||
| Path2D.quadraticCurveTo | ✔️ | |||
| Path2D.rect | ✔️ |