Canvas - HTML5 with Visual Studio 2012 - page 238

Figure 10-10. The initial solar system drawing

6. now you'll draw the earth and animate it around the orbit. normally the earth will

revolve around the sun once every 365.24 days but we'll speed this up a bit and
complete the trip in 60 seconds. To determine where to put the earth each time
the canvas is redrawn, you must calculate the number of seconds. The amount of
rotation per second is calculated as Math.PI *2 / 60 . Multiply this value by the
number of seconds to determine the angle where the earth should be.

7. Add the code from Listing 10-8 that is shown in bold. This code uses the rotate()

function to rotate the drawing context the appropriate angle. since the arc for the earth orbit
is 150 px, this code then uses the translate() function to move the context 150 pixels
to the right so the earth can be drawn at the adjusted 0,0 coordinate. The earth is then
drawn using a filled arc with a center point of 0,0, the new origin of the context.

Listing 10-8. Drawing the earth

// Draw the earth orbit
ssContext.scale(1.1, 1);
ssContext.strokeStyle = "black";
ssContext.beginPath();
ssContext.arc(0, 0, 150, 0, Math.PI * 2);
ssContext.stroke();

// Compute the current time in seconds (use the milliseconds
// to allow for fractional parts).
var now = new Date();
var seconds = ((now.getSeconds() * 1000)+now.getMilliseconds()) / 1000;

//---------------------------------------------
// Earth
//---------------------------------------------
// Rotate the context once every 60 seconds
var anglePerSecond = ((Math.PI * 2) / 60);
ssContext.rotate(anglePerSecond * seconds);
ssContext.translate(150, 0);