HTML and CSS Reference
In-Depth Information
}
}
Example 9-1
shows the entire code.
Example 9-1. A dynamic tile sheet example
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH9EX2: Canvas Copy
</title>
</title>
<
script src
=
"modernizr-1.6.min.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
(){
iif
(
!
canvasSupport
()) {
return
return
;
}
else
else
{
var
var
theCanvas
=
document
.
getElementById
(
"canvas"
);
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
var
var
theCanvas2
=
document
.
getElementById
(
"canvas2"
);
var
var
context2
=
theCanvas2
.
getContext
(
"2d"
);
}
var
var
rotationImageArray
=
[];
var
var
tileSheet
=
new
new
Image
();
var
var
animationFrame
=
0
;
tileSheet
.
addEventListener
(
'load'
,
eventSheetLoaded
,
false
false
);
tileSheet
.
src
=
"mediumrocks.png"
;
function
function
eventSheetLoaded
() {
startUp
();
}
function
function
startUp
(){
//context.drawImage(tileSheet, 0, 0);
//context2.drawImage(theCanvas, 0, 0,32,32,0,0,32,32);
for
for
(
var
var
ctr
=
0
;
ctr
<
360
;
ctr
+=
10
){
