thaibui · October 18, 2016 03:38
diff --git a/pulsing_circle.html b/pulsing_circle.html
 <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>
	<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>