HTML and CSS Reference

In-Depth Information

var p2 = {x:300, y:375};

var p3 = {x:400, y:20};

var player = {x:0, y:0, speed:.01, t:0};

var points = new Array();

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

setInterval(drawScreen, 33);

}

</script>

</head>

<body>

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

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
diagonal from
p1
, and
p2
and
p3
on an opposite diagonal from the other two

points.
p0
and
p3
must be closer to the center of the canvas than
p1
or
p2
. Below are the

points we will use to create this effect in
Example 5-13
:

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

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

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

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

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

Figure 5-16
. It shows what the looping curve looks like when
Example 5-13
is executed

in a web browser.

This effect can only be created with the four points of a cubic Bezier

curve. There is also a three-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.