HTML and CSS Reference
In-Depth Information
ball.t += ball.speed;
if (ball.t > 1) {
ball.t = 1;
}
Finally, when we draw the
ball
object on the canvas, we use the
xt
and
yt
values:
context.arc(xt,yt,5,0,Math.PI*2,true);
Figure 5-14
shows what
Example 5-11
(
CH5EX11.html
) looks like when it is executed
in a web browser. In addition to drawing the points of the path using the
points
array,
we also draw the four points of the Bezier curve. These illustrate the relationship of the
points to the curve itself. Notice that the curve does not pass through
p1
or
p2
.
Figure 5-14. Moving a circle on a Bezier curve
Example 5-11
gives the full code listing for
CH5EX11.html
, including the code to draw
the Bezier curve points on the canvas. You can find that code in the
drawScreen()
func-
tion following the
//draw the points
comment.
