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 ;
Search WWH ::




Custom Search