Day 2 Challenge
Write a program in HTML5 & Javascript to draw a pulsing circle (like a beating heart).
The code
You can see the end result here
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
<html>
<head>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
<script>
var c = document.getElementById("canvas");
var deltas = [];
for(var i = 1; i <= 10; i++) {
deltas[i-1] = i;
}
for(var i = 10, j = 10; i > 0; i--, j++) {
deltas[j] = i;
}
var index = 0;
var radius = 40;
setInterval(draw, 100);
function draw() {
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.clearRect(0,0,600,600);
var k = i++ % deltas.length;
ctx.arc(95,50,40+deltas[k],0,2*Math.PI);
ctx.stroke();
}
</script>
</body>
</html>