Click here to Skip to main content
11,485,965 members (75,344 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Simple HTML5 Spiro Drawing Page

, 9 Oct 2011 CPOL 13.4K 487 26
A simple HTM5 web page using Javascript and Canvas
SpiroSourceCode.zip
<!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>
    <title>Spiro</title>
	<style type="text/css">
	body
	{
		font-size: 10pt;
		font-family: verdana, arial, sans-serif;
	}
	select
	{
		font-size: 10pt;
	}
	div#params
	{
		margin: 10px;
	}
	</style>
<script type="text/javascript">
	function updateCanvas() {
		var c = document.getElementById("canvas1");
		var ctlSpeedRatio = document.getElementById("speedratio");
		var ctlSizeRatio = document.getElementById("sizeratio");
		var ctlSteps = document.getElementById("steps");
		var ctlColour = document.getElementById("color_menu0");
		var speedRatio = Number(ctlSpeedRatio.options[ctlSpeedRatio.selectedIndex].text);
		var sizeRatio = Number(ctlSizeRatio.options[ctlSizeRatio.selectedIndex].text);
		var steps = Number(ctlSteps.options[ctlSteps.selectedIndex].text);
		var colour = ctlColour.options[ctlColour.selectedIndex].value;
		var cxt = c.getContext("2d");
		cxt.beginPath();
		cxt.fillStyle = "#FFEEEE";
		cxt.clearRect(0, 0, 700, 700);
		cxt.fillRect(0, 0, 700, 700);
		cxt.strokeStyle = colour;// "#5555FF";
		var xOrigin = 350;
		var yOrigin = 350;
		var jSize = 320/(sizeRatio + 1);
		var iSize = sizeRatio * jSize;

		//begin drawing
		var n = steps * speedRatio;
		for (var i = 0; i <= n; i++) {
			var f = i * 3.14159265358979 * 2;
			var xi = (iSize * Math.sin(f / n)) + xOrigin;
			var yi = (iSize * Math.cos(f / n)) + yOrigin;

			var xj = (jSize * Math.sin(f / speedRatio));
			var yj = (jSize * Math.cos(f / speedRatio));
			if (i == 0)
				cxt.moveTo(xi + xj, yi + yj);
			else
				cxt.lineTo(xi + xj, yi + yj);
		}
		cxt.stroke();
	}

	function clearCanvas() {
		var c = document.getElementById("canvas1");
		var cxt = c.getContext("2d");
		cxt.clearRect(0, 0, 700, 700);
	}
	</script>
</head>
<body>
<div id='params'>
Size Ratio:&nbsp;
<select id='sizeratio' onchange='updateCanvas()'>
	<option>1</option>	
	<option>2</option>	
	<option>3</option>	
	<option selected="selected">4</option>	
	<option>5</option>	
</select>
&nbsp;&nbsp;Speed Ratio:&nbsp;
<select id='speedratio' onchange='updateCanvas()'>
	<option>2</option>	
	<option>3</option>	
	<option selected="selected">4</option>	
	<option>5</option>	
</select>
&nbsp;&nbsp;Steps:&nbsp;
<select id='steps' onchange='updateCanvas()'>
	<option>100</option>	
	<option>200</option>	
	<option selected="selected">300</option>	
	<option>400</option>	
	<option>500</option>	
</select>
&nbsp;&nbsp;Colour:&nbsp;
<select id="color_menu0" name="color_menu0" onchange="updateCanvas();" style="width: 60px">
<option style="background-color:#5f9ea0" value="#5f9ea0" selected">     
<option style="background-color:#d2691e" value="#d2691e">     
<option style="background-color:#ffd700" value="#ffd700">     
<option style="background-color:#7fff00" value="#7fff00">     
<option style="background-color:#006400" value="#006400">     
<option style="background-color:#a52a2a" value="#a52a2a">     
<option style="background-color:#ff1493" value="#ff1493">     
</select>
</select>
</div>
<div>
<canvas id='canvas1' width='700' height='700' >Canvas is not supported by this browser.</canvas>
</div>
<script type="text/javascript">
	updateCanvas();
</script>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ron de Jong
Product Manager
Australia Australia
No Biography provided

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 9 Oct 2011
Article Copyright 2011 by Ron de Jong
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid