HTML and CSS Reference
In-Depth Information
Listing 10-9.
Drawing the moon
// Draw the earth
ssContext.fillStyle = "green";
ssContext.beginPath();
ssContext.arc(0, -0, 10, 0, Math.PI * 2, true);
ssContext.fill();
//---------------------------------------------
// Moon
//---------------------------------------------
// Rotate the context 12 times for every earth revolution
anglePerSecond = 12 * ((Math.PI * 2) / 60);
ssContext.rotate(anglePerSecond * seconds);
ssContext.translate(0, 35);
// draw the moon
ssContext.fillStyle = "white";
ssContext.beginPath();
ssContext.arc(0, 0, 5, 0, Math.PI * 2, true);
ssContext.fill();
ssContext.restore()
■
There are actually about 12.368 lunar months per solar year. You can make your model more accurate by
using this figure instead of 12 in the preceding code.
Note
11. save your changes and press F5 to start the application. You should now see the
moon rotating around the earth as shown in Figure
10-12
.
Figure 10-12.
Including the moon
