HTML and CSS Reference

In-Depth Information

Creating a Cubic Bezier Curve Loop

You can create some very interesting paths using the four points in a cubic Bezier curve. One

such effect is a loop. To create a loop, you need to make sure the points form an X, with
p0

diagonalfrom
p1
,and
p2
and
p3
onanoppositediagonalfromtheothertwopoints.
p0
and
p3

must be closer to the center of the canvas than
p1
or
p2
. The points we will use to create this

effect in
Example 5-13
are as follows:

var

var
p0
=
{
x
:
150
,
y
:
440
;

var

var
p1
=
{
x
:
450
,
y
:
10
};

var

var
p2
=
{
x
:
50
,
y
:
10
};

var

var
p3
=
{
x
:
325
,
y
:
450
};

Because it is much easier to show than tell when it comes to cubic Bezier curves, look at
Fig-

ure 5-17
. It shows what the looping curve looks like when
Example 5-13
is executed in a web

browser.

NOTE

ThiseffectcanbecreatedonlywiththefourpointsofacubicBeziercurve.Thereisalsoathree-point

Bezier curve known as a quadratic Bezier curve. You cannot create loops or S curves with quadratic

Bezier curves because the three points are not as precise as the four points of a cubic Bezier curve.