HTML and CSS Reference
In-Depth Information
Applying Rotation Transformations to an Image
In the previous section, we created an animation using tiles from a tile sheet. In this section,
we will take it one step further and use the Canvas transformation matrix to rotate our image
beforedrawingittothecanvas.Thiswillallowustouseonlyasinglesetofanimatedtilesfor
all four (or more) rotated directions in which we would like to display our images. Before we
write the code, let's examine what it will take to rotate our tank animation from the previous
section.
NOTE
In
Chapter 2
, we dove into applying basic transformations when drawing with paths. The same con-
cepts apply to transforming images on the canvas. If you have not read the section
Simple Canvas
Transformations
in
Chapter 2
, you might want to review it before reading on.
