Reference curve()

curve()

Draws a curve using a Catmull-Rom spline.

Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points.

The first two parameters, x1 and y1, set the first control point. This point isn’t drawn and can be thought of as the curve’s starting point.

The next four parameters, x2, y2, x3, and y3, set the two anchor points. The anchor points are the start and end points of the curve’s visible segment.

The seventh and eighth parameters, x4 and y4, set the last control point. This point isn’t drawn and can be thought of as the curve’s ending point.

Spline curves can also be drawn in 3D using WebGL mode. The 3D version of curve() has twelve arguments because each point has x-, y-, and z-coordinates.

Examples

Syntax

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

Parameters

x1
Number:

x-coordinate of the first control point.

y1
Number:

y-coordinate of the first control point.

x2
Number:

x-coordinate of the first anchor point.

y2
Number:

y-coordinate of the first anchor point.

x3
Number:

x-coordinate of the second anchor point.

y3
Number:

y-coordinate of the second anchor point.

x4
Number:

x-coordinate of the second control point.

y4
Number:

y-coordinate of the second control point.

z1
Number:

z-coordinate of the first control point.

z2
Number:

z-coordinate of the first anchor point.

z3
Number:

z-coordinate of the second anchor point.

z4
Number:

z-coordinate of the second control 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!

Related References