Path2D

注意:此功能在 Web Workers 中可用。

Canvas 2D API 的 Path2D 接口用于声明一个路径,该路径随后可以在 CanvasRenderingContext2D 对象上使用。CanvasRenderingContext2D 接口的 路径方法 也存在于此接口中,这为您提供了能够随时保留和重播路径的便利。

构造函数

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 结束,在 counterclockwise 给定的方向上进行 (默认情况下为顺时针)。

Path2D.arcTo()

使用给定的控制点和半径向路径添加一个圆弧,通过一条直线连接到前一点。

Path2D.ellipse()

向路径添加一个椭圆弧,该椭圆弧以 (x, y) 位置为中心,半径为 radiusXradiusY,从 startAngle 开始,到 endAngle 结束,在 counterclockwise 给定的方向上进行 (默认情况下为顺时针)。

Path2D.rect()

为 (x, y) 位置处的矩形创建一个路径,其大小由 widthheight 决定。

Path2D.roundRect()

为 (x, y) 位置处的圆角矩形创建一个路径,其大小由 widthheight 决定,用于矩形角的圆形弧的半径由 radii 决定。

规范

规范
HTML 标准
# path2d-objects

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅