05 after each pass.
The fillStyle() method also uses the t variable to adjust the rgb color values for each circle drawn.
Figure 6-13 shows the result of the transformation.
Figure 6-13: A series of transformed circles
Chapter 6: Advanced Programming Topics: Canvas and Video
144
The rotate() method rotates the canvas based on the specified angle. For example, in the following
code, an image is drawn on the canvas three times, and each time the translate() and rotate()
parameter values and the globalAlpha property are changed:
function rotateImg(){
var canvas = document.getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
context.globalAlpha=???0.5???;
var r=1;
var img = new Image();
img.src = ???images/jared.jpg??™;
img.onload = function() {
for (i=1;i<4;i++) {
context.translate(50,-15);
context.rotate(.15*r);
context.globalAlpha=i*.33;
context.drawImage(img, 20, 20);
r+=1;
}
}
}
Figure 6-14 shows the layered result. Note the difference in transparency of the bottommost image to
the topmost.
Saving and Restoring State
When you begin to work with more advanced drawings on the canvas, you will need to manage the
drawing state. A drawing state includes the current path, the values of the major context properties (such
as fillStyle and globalAlpha ), and any transformations (such as rotating) that have been applied.
Pages:
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173