jQuery 1.4 Animation Techniques - Index of

[ 281 ]
Chapter 10
If the browser is not IE, we simply get the context and call our draw() function straight
away. Note that we pass the context object into the draw() function as an argument so that
the API methods work correctly. Other than these changes, our code is the same and should
now function as intended in IE versions 8 and below.
Pop Quiz – supporting IE
1. We wrap the getContext() method in a conditional comment that checks for IE
and uses an onload handler attached to the . Why?
a. The can only be interacted with via the element in IE
b. To give explorercanvas a chance to add getContext() support to the
in IE
c. To prevent memory leaks in IE
d. A handler function must be used with explorercanvas
2. Which methods/techniques do now work in IE when using explorercanvas?
a. Scaling and Bezier curves
b. Radial gradients and quadratic curves
c. Radial gradients, clearRect(), and non-uniform scaling
d. Non-uniform scaling, PNG-based images, and stroked text
Have a go hero – extending IE support
Convert your own flag (or logo/alternative) so that it works in IE using the explorercanvas
library. You'll more than likely need to make use of an onload event handler to ensure that
the getContext() method isn't called until the is ready to be used.
Animating the canvas
The methods we've looked at so far are easy to use and nothing if not a little
repetitive. Animating the objects on the is where things start to get interesting.
Animating is harder than simply drawing on the and as we have no real way of
debugging it other than trial and error, solving bugs can quickly become problematic and
somewhat time-consuming.
In our flag example, there was no real benefit to using the . We could have got
exactly the same effect, with much less code and processing, by simply including an image
of the flag on our page. However, animating the is where its benefits really begin.
This is where we can do much more than anything we could achieve with a simple image.
The additional complexity that animating the entails is totally worth it.