benatkin/gist:119812

## gistfile1.htm
<html>
<head>
  <title>Simple Line Art</title>
  <script type="text/javascript" src="jquery.js"></script>
  <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  <script type="text/javascript">
    $(document).ready(function() {
      canvas = document.getElementById("cv");
      ctx = canvas.getContext("2d");
      draw(ctx);
    });

    function draw(ctx) {
      ctx.lineWidth = "2";

      ctx.beginPath();
      circleLines(ctx, {
        a1 : 0,
        n  : 16,
        r1 : 75,
        r2 : 300,
        x  : 975 / 2,
        y  : 700 / 2
      }),
      ctx.strokeStyle = "rgb(0, 0, 0)";
      ctx.stroke();

      ctx.beginPath();
      circleLines(ctx, {
        a1 : 2 * Math.PI / 16 / 2,
        n  : 16,
        r1 : 125,
        r2 : 280,
        x  : 975 / 2,
        y  : 700 / 2
      }),
      ctx.strokeStyle = "rgb(255, 0, 0)";
      ctx.stroke();
    }

    function circleLines(ctx, opts) {
      var a1 = opts['a1'];
      var n  = opts['n'];
      var r1 = opts['r1'];
      var r2 = opts['r2'];
      var x  = opts['x'];
      var y  = opts['y'];
      for (var i=0; i < n; i++) {
        a = a1 + 2 * Math.PI * i / n;
        ctx.moveTo(x + Math.sin(a) * r1, y + Math.cos(a) * r1);
        ctx.lineTo(x + Math.sin(a) * r2, y + Math.cos(a) * r2);
      }
    }
  </script>
  <style>
    body {
      background-color: white;
      margin-top: 50px;
      text-align: center;
    }

    canvas {
      border:1px solid #bbb;
    }
  </style>
</head>
<body>
  <canvas id="cv" width="975" height="700"></canvas>
</body>
</html>
	<html>
	<head>
	<title>Simple Line Art</title>
	<script type="text/javascript" src="jquery.js"></script>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script type="text/javascript">
	$(document).ready(function() {
	canvas = document.getElementById("cv");
	ctx = canvas.getContext("2d");
	draw(ctx);
	});

	function draw(ctx) {
	ctx.lineWidth = "2";

	ctx.beginPath();
	circleLines(ctx, {
	a1 : 0,
	n : 16,
	r1 : 75,
	r2 : 300,
	x : 975 / 2,
	y : 700 / 2
	}),
	ctx.strokeStyle = "rgb(0, 0, 0)";
	ctx.stroke();

	ctx.beginPath();
	circleLines(ctx, {
	a1 : 2 * Math.PI / 16 / 2,
	n : 16,
	r1 : 125,
	r2 : 280,
	x : 975 / 2,
	y : 700 / 2
	}),
	ctx.strokeStyle = "rgb(255, 0, 0)";
	ctx.stroke();
	}

	function circleLines(ctx, opts) {
	var a1 = opts['a1'];
	var n = opts['n'];
	var r1 = opts['r1'];
	var r2 = opts['r2'];
	var x = opts['x'];
	var y = opts['y'];
	for (var i=0; i < n; i++) {
	a = a1 + 2 * Math.PI * i / n;
	ctx.moveTo(x + Math.sin(a) * r1, y + Math.cos(a) * r1);
	ctx.lineTo(x + Math.sin(a) * r2, y + Math.cos(a) * r2);
	}
	}
	</script>
	<style>
	body {
	background-color: white;
	margin-top: 50px;
	text-align: center;
	}

	canvas {
	border:1px solid #bbb;
	}
	</style>
	</head>
	<body>
	<canvas id="cv" width="975" height="700"></canvas>
	</body>
	</html>