Timeout2

Timeout2.html  [download]

<!DOCTYPE html>
<html>
<head>
<!-- Like my java example, but no use of OOP here -->

<title>Comp 86 example Timeout2</title>

<script type="text/javascript">

// Animation loop
function animate () { //*2 Modern approach for animation
	requestAnimationFrame (animate); //*2

	animate.frame = animate.frame+1 || 0; //*3 Update picture based on frame
	draw (animate.frame/6); //*3
}

// Just use animate() above to start things rolling
window.onload = animate //*1 First time

function draw (nboxes) {
	var c = document.getElementById ("myCanvas");
	var gc = c.getContext("2d");

	// Clear background
	gc.fillStyle = "white";
	gc.fillRect (0, 0, c.width, c.height);

	// Draw boxes
	gc.strokeStyle = "black";
	for (ibox=0; ibox<nboxes; ibox++) {
		// First, reset to identity
		gc.setTransform (1, 0, 0, 1, 0, 0) //*4 Sets transform for whole GC
		gc.translate (100+2*ibox, 100+2*ibox) //*4
		gc.rotate (ibox/10.) // in radians //*4
		gc.strokeRect (-25, -25, 50, 50)  //*4
	}
}

</script>
</head>

<body>
<canvas id="myCanvas"
	width="500" height="500"
	style="border-style: solid; border-color: blue; border-width: 1px"
</canvas>
</body>
</html>