Toybox A4 Code

As promised, more code! This time for the Toybox A4 canvas demo page I created.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Toybox A4</title>
 
	<script language="javascript" type="application/javascript">
 
		var example;
		var context;
		var b =0;
 
		function init() {
			example = document.getElementById('canvas1');
			context = example.getContext('2d');
			b=0;
			draw();
		} // end init
 
		function draw() {
 
			context.fillStyle = "rgb(255,255,255)";
			context.fillRect(0, 0, 800, 800);
 
			var icCount = 16;
			var number = Math.PI * 2 / icCount;
 
			for (n=1; n<= icCount; n++) {
 
				x = 200 + ((Math.sin(number * (17-(n/ Math.PI)) * b)) * (20+(n*8)));
				y = (n * 30) + 20;
				c = (17-n) * 16;
 
				// Draw background circle
				context.beginPath(); 
				context.fillStyle = 'rgb(255,255,255)';
				context.arc(x, y, 22, 0, Math.PI*2, true); 
				context.closePath();
				context.fill();
 
				// Draw Foreground circle
				context.beginPath(); 
				context.fillStyle = 'rgb(' + c + ',' + c + ',90)';
				context.arc(x, y, 20, 0, Math.PI*2, true); 
				context.closePath();
				context.fill(); 
 
			} // end for
 
			b += 0.04;
 
			setTimeout("draw()",33);
 
		} // end draw function
 
</script>
 
</head>
 
<body onload="init();" align="center" bgcolor="#FFFFFF">
	<canvas id="canvas1" width="400" height="800"></canvas>
</body>
 
</html>