forked from skjApp/HTML5-Examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCanvasAnimation1.htm
99 lines (75 loc) · 2.34 KB
/
CanvasAnimation1.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Animation 1</title>
</head>
<body>
<canvas id = 'canvas1' width = '500px' height = '500px'>
</canvas>
<input id = 'button1' type='button' value = 'Start Animation' onclick = startAnimation() />
<input id = 'button2' type='button' value = 'Stop Animation' onclick = stopAnimation() />
<script type="text/javascript">
var canvas1 = document.getElementById('canvas1') ;
var ctx = canvas1.getContext('2d') ;
var animationData =
{
'currentFrame' : 0 ,
'x' : 10,
'y' : 10,
'imageSrc' : 'https://github.com/skjApp/OpenGraphics/raw/master/BalloonBoy1(416x78).png' ,
"frames": [
{'xOffset': 0,'yOffset':0, 'width': 41,'height': 78}, // frame 0
{'xOffset': 41,'yOffset':0, 'width': 33,'height': 78}, // frame 1
{'xOffset': 74,'yOffset':0, 'width': 32,'height': 78}, // frame 2
{'xOffset':106,'yOffset':0, 'width': 34,'height': 78}, // frame 3
{'xOffset':140,'yOffset':0, 'width': 33,'height': 78}, // frame 4
{'xOffset':173,'yOffset':0, 'width': 35,'height': 78}, // frame 5
]
} ;
var img ;
function loadAnimation()
{
img = new Image() ;
img.src = animationData['imageSrc'] ;
}
loadAnimation() ;
var timerID ;
function animate()
{
ctx.fillColor = 'black' ;
ctx.fillRect(0,0,500,500) ;
var x = animationData['x'] ;
var y = animationData['y'] ;
var currentFrame = animationData['currentFrame']
var frame = animationData['frames'][currentFrame] ;
var xOffset = frame['xOffset'] ;
var yOffset = frame['yOffset'] ;
var width = frame['width'] ;
var height = frame['height'] ;
if(img != undefined)
{
ctx.drawImage(img, xOffset, yOffset, width, height, x, y, width, height) ;
}
// Updating Current Frame
if(currentFrame < 5)
{
animationData['currentFrame'] = animationData['currentFrame'] + 1 ;
}
else
{
animationData['currentFrame'] = 0 ;
}
// Updation x
animationData['x'] = animationData['x'] + 4 ;
}
function startAnimation()
{
timerID = setInterval(function(){animate();},125) ;
}
function stopAnimation()
{
clearInterval(timerID) ;
}
</script>
</body>
</html>