HTML and CSS Reference
In-Depth Information
Applying Scaling
Before you finish up this model, there's one minor correction that you'll make. The earth's orbit is not actually a
perfect circle. This attribute is known as eccentricity. (If you're curious about orbital eccentricity, check out the
article at
http://en.wikipedia.org/wiki/Orbital_eccentricity
.
) To model this in your drawing you'll stretch
the orbit, making it a little bit wider than it is tall. To do this you'll use scaling.
The
scale()
function performs the third type of transformation. This function takes two parameters
that specify the scaling along the x and y axis. A scale factor of 1 is the normal scale. A factor less than one will
compress the drawing and a factor greater than 1 will stretch it. While the imperfection in the earth's orbit is
extremely slight, you'll exaggerate it here and use a scale factor of 1.1 for the x axis.
Add the following code shown in bold just before the earth orbit is drawn:
// Draw the earth orbit
ssContext.scale(1.1, 1);
ssContext.strokeStyle = "black";
Press F5 to start the application, which should look like Figure
10-13
.
Figure 10-13.
Adding scaling
You now have a slightly out-of-shape orbit. By simply changing the scale factor all the various drawing
elements were adjusted proportionally. Also, after restoring the context, the scaling is restored to normal so
subsequent elements are drawn correctly.
Clipping a Canvas
I want to cover one more feature related to paths. Earlier I said that after you call
beginPath()
and then the
desired drawing functions, you can either call
stroke()
or
fill()
. There is one more function you can call as
well:
clip()
. The
clip()
function will use the path that you just defined and will not allow anything to be drawn
outside of that path. This doesn't affect what has already been drawn but any future shapes will be restricted to
the clipping area defined by this path.
To demonstrate this, you'll go back to the chess board example and define a clipping path using an arc.
Go to the board
script
element and add the code shown in bold to the
drawBoard()
function:
