S2JS - Rotating, flipping, pointing - another game : Rotating the image

The final step is to actually alter the way the image is drawn, according to the value stored in the angle property.

For this we make use of the rotate method of our drawing context.

We add these lines of code to just before where we call ctx.drawImage.

ctx.rotate(this.angle * Math.PI / 180);

(The stuff about "PI" and "180" is because most computer languages express angles in Radians. You may have studied Radians in high school mathematics, or seen mention of it on your calculator. Most people find Degrees more natural, and this calculation converts Degrees to Radians. It lets us express our angles in Degrees.)

Try clicking on the window so it gets focus, then pressing the left or right keys.

What happens?

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; this.angle= 0; // How many degrees we are rotated } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {thing.angle = thing.angle - 15}; // left if (MyEvent.keyCode == 39) {thing.angle = thing.angle + 15}; // right MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); MySprite.prototype.Do_Frame_Things = function() { ctx.rotate(this.angle * Math.PI / 180); if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } var thing= new MySprite("http://s2js.com/img/etc/cat_grumpy.png"); thing.x=120; thing.y=120; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame thing.Do_Frame_Things(); // let the thing do its thing } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>