HTML and CSS Reference
In-Depth Information
This is the place 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 filesys-
tem), this error will be thrown on all browsers but Safari (currently).
Finally, the new
imageData
is pushed into the
rotationImageArray
. When the loop is
complete, we set up an interval to run and call the
drawScreen()
function every 100
milliseconds.
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. Naturally, 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 drawScreen() {
//context.fillStyle = "#ffffff";
//context.fillRect(50,50,32,32);
context.putImageData(rotationImageArray[animationFrame],50,50);
animationFrame++;
if (animationFrame ==rotationImageArray.length){
animationFrame=0;
}
}
Example 9-2
shows the entire code.
Example 9-2. A dynamic tile sheet example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH9EX2: Canvas Copy</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
