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
) 位置为中心,半径为radiusX
和radiusY
,从startAngle
开始,到endAngle
结束,在counterclockwise
给定的方向上进行 (默认情况下为顺时针)。 Path2D.rect()
-
为 (
x, y
) 位置处的矩形创建一个路径,其大小由width
和height
决定。 Path2D.roundRect()
-
为 (
x, y
) 位置处的圆角矩形创建一个路径,其大小由width
和height
决定,用于矩形角的圆形弧的半径由radii
决定。
规范
规范 |
---|
HTML 标准 # path2d-objects |
浏览器兼容性
BCD 表格仅在浏览器中加载