参考 bezier()

bezier()

绘制贝塞尔曲线。

贝塞尔曲线可以形成轻微倾斜的形状和曲线。它们由两个锚点和两个控制点定义。 相比使用 curve() 函数创建的样条曲线，贝塞尔曲线提供了更多的控制。

前两个参数 x1 和 y1，设置第一个锚点，第一个锚点是曲线的起点。

紧接着的四个参数 x2，y2，x3，和 y3，设置两个控制点。曲线会朝着控制点的方向被拉拽。

第七和第八个参数 x4 和 y4，设置最后一个锚点，最后一个锚点是曲线的终点。

贝塞尔曲线也可以在 3D 中使用 WebGL 模式绘制。 bezier() 的 3D 版本有十二个参数，因为每个点都有 x、y 和 z 坐标。

示例

语法

bezier(x1, y1, x2, y2, x3, y3, x4, y4)
bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

参数

x1
Number:

x-coordinate of the first anchor point.

y1
Number:

y-coordinate of the first anchor point.

x2
Number:

x-coordinate of the first control point.

y2
Number:

y-coordinate of the first control point.

x3
Number:

x-coordinate of the second control point.

y3
Number:

y-coordinate of the second control point.

x4
Number:

x-coordinate of the second anchor point.

y4
Number:

y-coordinate of the second anchor point.

z1
Number:

z-coordinate of the first anchor point.

z2
Number:

z-coordinate of the first control point.

z3
Number:

z-coordinate of the second control point.

z4
Number:

z-coordinate of the second anchor point.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/curves.js and open a pull request!

相关参考