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.