Canvas Games: Part I - HTML5 Canvas - page 648

context . font = '20px sans-serif' ;
context . textBaseline = 'top' ;
context . fillText ( "Player Ship - rotate" , 0 , 180 );

//transformation
var var angleInRadians = rotation * Math . PI / 180 ;

context . save (); //save current state in stack
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 ); // reset to identity

//translate the canvas origin to the center of the player
context . translate ( x , y );
context . rotate ( angleInRadians );

//drawShip
context . strokeStyle = '#ffffff' ;
context . beginPath ();
context . moveTo ( 10 , 0 );
context . lineTo ( 19 , 19 );
context . lineTo ( 10 , 9 );
context . moveTo ( 9 , 9 );
context . lineTo ( 0 , 19 );
context . lineTo ( 9 , 0 );

context . stroke ();
context . closePath ();

//restore context
context . restore (); //pop old state on to screen

//add to rotation
rotation ++ ;

}

As you can see, the player ship rotates clockwise one degree at a time. As we've mentioned
manytimesalready,wemustconvertfromdegreestoradiansbecausethe context.rotate()
transformations use radians for calculations. In the next section, we'll take a deeper look at
some of the transformations we will use in our Geo Blaster Basic game.