To this end, you can use the save() and restore() methods. The save() method saves a snapshot of
the canvas, which can then be retrieved later using the restore() method. The save() and restore()
methods enable you to return to a default drawing state with minimal additional code and without
needing to painstakingly recreate every setting.
Creating an Animation
You can use the context drawing capabilities discussed earlier in combination with JavaScript timer
routines to create animations on the canvas. On first take, the potential for creating canvas-based
animation sounds like a perfect lightweight substitute for Flash for iPhone and iPod touch. For some
purposes, it can be ideal. However, any such excitement needs to be kept in reasonable check. Perhaps
the chief shortcoming of the canvas drawing in JavaScript is that you need to repaint the entire canvas
for each frame of your animation. As a result, complex animations risk becoming jerky on the mobile
device. That being said, canvas animation can be a powerful tool to add to your development toolbox.
Like a motion picture or video clip, an animation is a series of frames that, when viewed one after the
other, gives the appearance of movement. Therefore, when you code, your job is to show a drawing,
clear it, draw the next frame in the series, clear it, and so on until your animation is completed or it loops
back to the start.
Pages:
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174