HTML and CSS Reference
In-Depth Information
context2
.
fillRect
(
0
,
0
,
32
,
32
);
context2
.
save
();
context2
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
)
var
var
angleInRadians
=
ctr
*
Math
.
PI
/
180
;
context2
.
translate
(
16
,
16
);
context2
.
rotate
(
angleInRadians
);
context2
.
drawImage
(
tileSheet
,
0
,
0
,
32
,
32
,
-
16
,
-
16
,
32
,
32
);
context2
.
restore
();
var
var
imagedata
=
context2
.
getImageData
(
0
,
0
,
32
,
32
)
rotationImageArray
.
push
(
imagedata
);
}
setInterval
(
drawScreen
,
100
);
}
This loop first clears
theCanvas2
with a white color and then saves it to the stack. We then
translate to the center of our object and rotate the canvas by the current
ctr
value (an incre-
ment of
10
). Next, we draw the first tile from
mediumrocks.png
and save the result in a new
local
imageData
instance, using the
getImageData()
function.
NOTE
This is where the security error will be thrown if the domain of the image and the domain of the
HTML file are not the same. On a local machine (not running on a local web server, but from the
filesystem), this error will be thrown on all browsers but Safari (currently).
Finally, the new
imageData
is pushed into the
rotationImageArray
. When the loop is com-
plete,wesetupanintervaltorunandcallthe
drawScreen()
functionevery100milliseconds.
To display the animation on the first canvas, we use this timer loop interval and call
putImageData()
to draw each frame in succession, creating the simulation of animation. As
with the tile sheet, we didn't have to use 36 frames of animation; we could use just five. Nat-
urally, the animation is much smoother with more frames, but this process shows how easy it
is to create simple transformation animations on the fly rather than precreating them in image
files:
function
function
drawScreen
() {
//context.fillStyle = "#ffffff";
//context.fillRect(50,50,32,32);
context
.
putImageData
(
rotationImageArray
[
animationFrame
],
50
,
50
);
animationFrame
++
;
iif
(
animationFrame
==
rotationImageArray
.
length
){
animationFrame
=
0
;