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

Custom Search