jQuery 1.4 Animation Techniques - Index of

[ 275 ]
Chapter 10
In the previous screenshot, we can see the simple arrangement of geometric shapes that
make up the British flag (note that the flag is not completely to scale). Images like this are
easy to produce using the but even simple shapes can require a lot of code.
What just happened?
The first thing we do is get the element using JavaScript's getElementById()
method, and then get the two-dimensional context object from the with the
getContext() method. We can now interact with the via the context object.
We set some of the color for the context using the fillStyle property, and then draw a
solid rectangle using the fillRect() method. The arguments specified are the starting x
and y location of the rectangle, and the width and height.
The filled rectangle picks up the fill style that we just set which is deep blue and will form the
background of our flag. We now need to create a white horizontal and diagonal cross on top
of the blue background. We can do this by drawing two thick lines across the middle of the
flag, one vertical and one horizontal. We'll use paths for this, so we start a new path using
the beginPath() method.
Next we set the color of the stroke to white using the strokeStyle property, and
the width of the path using the lineWidth property. To draw a path we have tell the
(or the context object actually) where to start the path, which we do using the
moveTo() method, specifying the coordinates to move to as arguments (the top middle
of the rectangle).
To make the path, we then use the lineTo() method, specify the coordinates of where to
end the path (the bottom middle of the rectangle). This gives us the vertical line. To make the
horizontal path, we repeat the same process, moving to the left middle of the rectangle and
drawing to the right middle.
Coordinates specified using the moveTo() method are always relative to the canvas itself
with 0, 0 representing the top-left corner of the canvas. This is the same for the lineTo()
method as well, even though the line that is drawn begins at the point specified by the last
call of moveTo().
Next we need to make a diagonal white cross over the background rectangle and the vertical
cross, which we'll do by drawing paths in the same way as before using combinations of
moveTo() and lineTo() methods.
All of the paths we've added so far are part of the same path—they are sub-paths, and at
this point they aren't actually visible. To make them visible, we need to either fill or stroke
them, so we stroke them with the stroke() method and then close the path with the
closePath() method.