HTML and CSS Reference
In-Depth Information
context2
.
fillStyle
=
"#ffffff"
;
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
);
}
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
;
}
}
}
<
/script>
</head>
</head>
<body>
<body>
<div>
<div>
<canvas
<canvas id=
"canvas"
width=
"256"
height=
"256"
style=
"position: absolute; top:
50px; left: 50px;"
>
Your browser does not support the HTML 5 Canvas.
</canvas>
</canvas>
<canvas
<canvas id=
"canvas2"
width=
"32"
height=
"32"
style=
"position: absolute; top:
256px; left: 50px;"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
