Math, Physics, and Animation - HTML5 Canvas - page 385

ball . velocityy = 0 ;
ball . y = theCanvas . height - ball . radius ;

}

Nextweapplytheconstant x velocityandthenew y velocityto ball anddrawittothecanvas:

ball . y += ball . velocityy ;
ball . x += ball . velocityx ;

context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , ball . radius , 0 , Math . PI * 2 , true true );

context . closePath ();
context . fill ();
Figure 5-18 shows what the path looks like when simple gravity is applied to a ball moving
on a vector. We have added the points to illustrate the path.

Figure 5-18. Simple gravity with an object moving on a vector

Youcantestout Example 5-14 withthefile CH5EX14.html inthecodedistribution,ortypein
the full code listing below.

Example 5-14. Simple gravity