Animation with the Canvas
In This Chapter
Working with images
Handling keyboard input
Building basic animations
The <canvas> tag (introduced in Chapter 6 of this minibook) adds some long-needed graphical support to HTML. In this chapter, you see how to extend these ideas to create interesting animations and even user interaction.
Transformations are math operations that can be applied to any drawing or image to change the appearance. There are three major transformations:
- translation: Move a particular amount in X and Y
- rotation: Rotate around a particular point
- scale:Change the size of the drawing in X and Y
The <canvas> element allows all these operations on any type of drawing. However, the way the <canvas> element does this gets a little closer to math than you may have gotten before. Transformations in the canvas element can be hard to understand until you understand a little about how they really work.
In math, you don't really transform objects. Instead, you modify the coordinate system, and draw your image in the newly ...