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.
Search WWH ::

Custom Search