Canvas Games: Part II - HTML5 Canvas - page 780

var var theCanvas2 = document . getElementById ( "canvas2" );

var

var context2 = theCanvas2 . getContext ( "2d" );
We use the mediumrocks.png file ( Figure 9-9 ) from the Geo Blaster Extended game as our
source for the dynamic tile sheet. Don't let this confuse you. We will not use all five tiles on
this tile sheet—only the first tile.

Figure 9-9. The mediumrocks.png tile sheet

In Geo Blaster Extended , we used all five tiles to create a simulated rotation animation. Here,
we use only the first tile. We draw this first tile, rotate it on theCanvas2 by 10 degrees, and
then copy the current imageData pixels from this canvas to an array of imageData instances
called rotationImageArray .

Wethenrepeatthisprocessbyrotating theCanvas2 by 10 moredegreesandinaloopuntilwe
have 36 individual frames of imageData representing the rotation animation for our medium
rock in an array:

var var rotationImageArray = [];

var var animationFrame = 0 ;

var

var tileSheet = new new Image ();

tileSheet . addEventListener ( 'load' , eventSheetLoaded , false

false );

tileSheet . src = "mediumrocks.png" ;

The rotationImageArray variable holds the generated imageData instances, which we cre-
ate by using a rotation transformation on theCanvas2 .

The animationFrame is used when redisplaying the rotation animation frames in rota-
tionImageArray back to the first theCanvas to demo the animation.

When the tileSheet is loaded, the eventSheetLoaded() function is called, which in turn
calls the startup() function. The startup() function uses a loop to create the 36 frames of
animation:

function function startUp (){

for for ( var var ctr = 0 ; ctr < 360 ; ctr += 10 ){

context2 . fillStyle = "#ffffff" ;