HTML and CSS Reference
In-Depth Information
Figure 10-9.
Collapsing the script element
3.
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.
4.
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.
5.
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
.
