HTML and CSS Reference
Figure 10-9. Collapsing the script element
This code gets the canvas element and then obtains the 2d drawing context, just
like the previous example. It then uses the setInterval() function to call the
animateSS() function every 100 milliseconds. The animateSS() function is what
does the real work. It clears the entire area and then fills it with dark blue color. The
rest of the code relies on transformations so it first saves the drawing context and
then restores it when finished.
This animateSS() function uses the translate() function to move the origin to the
approximate midpoint of the canvas. The sun and the earth orbit are drawn using the
arc() function. notice the center point for both is 0, 0 since the context's origin is
now in the middle of the canvas. Also notice the start angle is 0 and the end angle is
specified as Math.PI * 2 . In radians, this is a full circle or 360°. The arc for the sun
is filled in and the orbit is not.
Press F5 to start the application. so far, the drawing is not very interesting; a sun
with an orbit drawn around it as shown in Figure 10-10 .