HTML and CSS Reference
In-Depth Information
Example 8-5. Rotating an image
//canvasApp level variables
var rotation = 0;
var x = 50;
var y = 50;
function drawScreen() {
// draw background and text
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Player Ship - rotate", 0, 180);
//transformation
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 men-
tioned many times already, we must convert from degrees to radians because the
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.
Search WWH ::




Custom Search