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.
