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 . ) 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:
Search WWH ::

Custom Search