绘制使用 Catmull-Rom 样条的曲线。
样条曲线可以形成轻微倾斜的形状和曲线。它们就像连接到一组点的电缆。样条曲线由两个锚点和两个控制点定义。
前两个参数 x1
和 y1
设置第一个控制点。这个点不会被绘制,可以被认为是曲线的起点。
接下来的四个参数 x2
, y2
, x3
,和 y3
,设置两个锚点。锚点是曲线可见部分的起点和终点。
第七个和第八个参数 ,x4
和 y4
设置最后一个控制点。这个点不会被绘制,可以被认为是曲线的终点。
样条曲线也可以在 3D 中使用 WebGL 模式绘制。curve()
的 3D 版本有十二个参数,因为每个点都有 x、y 和 z 坐标。
示例
语法
curve(x1, y1, x2, y2, x3, y3, x4, y4)
curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
参数
x-coordinate of the first control point.
y-coordinate of the first control point.
x-coordinate of the first anchor point.
y-coordinate of the first anchor point.
x-coordinate of the second anchor point.
y-coordinate of the second anchor point.
x-coordinate of the second control point.
y-coordinate of the second control point.
z-coordinate of the first control point.
z-coordinate of the first anchor point.
z-coordinate of the second anchor point.
z-coordinate of the second control point.
相关参考
bezier
绘制贝塞尔曲线。 贝塞尔曲线可以形成轻微倾斜的形状和曲线。它们由两个锚点和两个控制点定义。 相比使用 curve() 函数创建的样条曲线,贝塞尔曲线提供了更多的控制。 前两个参数 x1 和 y1,设置第一个锚点,第一个锚点是曲线的起点。 紧接着的四个参数 x2,y2,x3,和 y3,设置两个控制点。曲线会朝着控制点的方向被拉拽。 第七和第八个参数 x4 和 y4,设置最后一个锚点,最后一个锚点是曲线的终点。 贝塞尔曲线也可以在 3D 中使用 WebGL 模式绘制。 bezier() 的 3D 版本有十二个参数,因为每个点都有 x、y 和 z 坐标。 .
bezierDetail
设置在 WebGL 模式下绘制贝塞尔曲线时使用的分段数。 在 WebGL 模式下,平滑的形状是使用许多平面分段绘制的。增加更多的平面分段使形状看起来更加平滑。 参数 detail 是在绘制贝塞尔曲线时要使用的分段数。例如,调用 bezierDetail(5) 函数将使用 5 个分段来绘制贝塞尔曲线。bezier() function.
bezierPoint
使用插值计算贝塞尔曲线上的坐标。 bezierPoint() 使用锚点和控制点计算贝塞尔曲线上的坐标。它的点的顺序与 bezier() 函数相同。 bezierPoint() 每次只在一个轴上工作。传递锚点和控制点的 x 坐标将计算曲线上一点的 x 坐标。传递锚点和控制点的 y 坐标将计算曲线上一点的 y 坐标。 第一个参数 a 是第一个锚点的坐标。 第二个和第三个参数 b 和 c 是控制点的坐标。 第四个参数 d 最后一个锚点的坐标。 第五个参数 t 是沿着曲线进行插值的量。0 是第一个锚点,1 是第二个锚点,0.5 是它们之间的中间点。 .
bezierTangent
计算贝塞尔曲线切线上的坐标。 切线与曲线表面相切。切线的斜率等于它与曲线相交点处的曲线斜率。 bezierTangent() 使用贝塞尔曲线的锚点和控制点计算切线上的坐标。它期望的点的顺序与 bezier() 函数相同。 bezierTangent() 每次只在一个轴上工作。锚点和控制点的 x 坐标可以用于计算切线点的 x 坐标。锚点和控制点的 y 坐标可以用于计算切线点的 y 坐标。 第一个参数 a 是第一个锚点的坐标。 第二个和第三个参数 b 和 c 是控制点的坐标。 第四个参数 d 是最后一个锚点的坐标。 第五个参数 t 是沿着曲线进行插值的量。0 是第一个锚点,1 是第二个锚点,0.5 是它们之间的中间点。 .