Chapter 7
Animation with the Canvas
In This Chapter
Working with images
Managing transformations
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
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 ...
Get HTML5 and CSS3 All-in-One For Dummies, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
