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.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的路径方法也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。

构造函数

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，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
Path2D.arcTo(): 根据控制点和半径添加一条圆弧路径，使用直线连接前一个点。
Path2D.ellipse(): 添加一条椭圆路径。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise （默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。
Path2D.rect(): 创建一条矩形路径，矩形的起点位置是 (x, y)，尺寸为 width 和 height。

规范

Specification
HTML Standard # path2d-objects

浏览器兼容性

BCD tables only load in the browser

参见

CanvasRenderingContext2D