Plotting Regular Stars

Regular Stars source code

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

function generateStar(x, y, r, r2, points, rot) {
	var coords = [];
	var seg = (Math.PI * 2) / points;
	var seg2 = seg / 2;

	for(var i = 0; i < points; i++) {
		coords.push([
			x + ( Math.cos( ( seg * i ) + rot ) * r ),
			y + ( Math.sin( ( seg * i ) + rot ) * r )
		]);

		coords.push([
			x + ( Math.cos( ( seg * i ) + seg2 + rot ) * r2 ),
			y + ( Math.sin( ( seg * i ) + seg2 + rot ) * r2 )
		]);
	}

	return coords;
}

function drawStar(x, y, r, r2, points, rot) {
	var ctx = document.getElementById("viewshapes").getContext('2d');

	var poly = generateStar(x, y, r, r2, points, rot);

	ctx.beginPath();
	ctx.moveTo(poly[0][0], poly[0][1]);

	for(var i = 1; i < poly.length; i++) {
		ctx.lineTo(poly[i][0], poly[i][1]);
	}

	ctx.closePath();
	ctx.stroke();
}

window.addEventListener("load", function () {
	drawStar(100, 100, 80, 30, 5, 0);		// 5 points
	drawStar(180, 150, 80, 30, 4, Math.PI/4);	// 4 points
	drawStar(260, 120, 80, 30, 8, Math.PI);		// 8 points
	drawStar(360, 150, 80, 30, 3, Math.PI/2);	// 3 points
});

</script>
</head>
<body>

<canvas id="viewshapes" width="600" height="300">
If you see this text, please switch to a browser that supports canvas
elements.</canvas>

</body>
</html>
Page loaded in 0.008 second(s).