mgng · June 11, 2009 09:27
diff --git a/gistfile1.htm b/gistfile1.htm
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html lang="ja">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="content-style-type" content="text/css">
 <title>正n角形を描画するテスト</title>
 </head>
 <body>

 <style type="text/css"><!--
 .canvas{
 position   : relative;
 background : #EEF;
 width      : 300px;
 height     : 300px;
 padding    : 0;
 }

 .dot{
 position    :absolute;
 background  :#000;
 width       :1px;
 height      :1px;
 overflow    :hidden;
 }
 --></style>


 <form action="javascript:;" method="POST" name="f">
  中心座標X<input type="text" name="x" value="150"><br>
  中心座標Y<input type="text" name="y" value="150"><br>
  円の半径<input type="text" name="r" value="100"><br>
  頂点の数<input type="text" name="n" value="4"><br>
  <button onclick="javascript:create()">作成</button>
 </form>

 <div id="canvas" class="canvas"></div>
 <div id="result"></div>

 <script type="text/javascript"><!--
 function create(){
  var start = new Date*1;
  var canvas = document.getElementById('canvas');
  var dot_cache = document.createElement('div');
  
  canvas.innerHTML = '';
  
  function createCoordinates(x, y, r, n) {
    var ret = [];
    for(var i=0;i<n; i++) {
      var coordinates = {
        x: parseInt(x - (r * Math.cos(360/n*i*Math.PI/180))),
        y: parseInt(y - (r * Math.sin(360/n*i*Math.PI/180)))
      };
      ret.push(coordinates);
    }
    return ret;
  }
  
  function drawDot(x,y){
    var dot = document.createElement('span');
    dot.className = 'dot';
    dot.style.left = x + 'px';
    dot.style.top  = y + 'px';
    dot_cache.appendChild(dot);
  }
  
  function drawLine(x1,y1,x2,y2) {
    if (x1==x2 && y1==y2) {return;}
    var x_move = x2-x1;
    var y_move = y2-y1;
    var x_diff = x_move<0 ? 1:-1;
    var y_diff = y_move<0 ? 1:-1;
    if (Math.abs(x_move) >= Math.abs(y_move)){
      for (var i=x_move; i!=0; i+=x_diff) {
        drawDot(x2-i, y2-Math.round(y_move*i / x_move));
      }
    } else {
      for (var i=y_move; i!=0; i+=y_diff) {
        drawDot(x2-Math.round(x_move*i / y_move), y2-i);
      }
    }
  }
  
  var f = document.f;
  var c = createCoordinates(
    parseInt(f.x.value, 10),
    parseInt(f.y.value, 10),
    parseInt(f.r.value, 10),
    parseInt(f.n.value, 10)
  );
  
  for(var i=0; i<c.length; ++i) {
    var x1 = c[i].x;
    var y1 = c[i].y;
    var x2 = (c[i+1])? c[i+1].x : c[0].x;
    var y2 = (c[i+1])? c[i+1].y : c[0].y;
    drawLine(x1, y1, x2, y2);
  }
  
  canvas.appendChild(dot_cache);
  
  document.getElementById('result').innerHTML = [(new Date*1)-start, 'msec'].join('');
 }
 //--></script>


 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="content-style-type" content="text/css">
	<title>正n角形を描画するテスト</title>
	</head>
	<body>

	<style type="text/css"><!--
	.canvas{
	position : relative;
	background : #EEF;
	width : 300px;
	height : 300px;
	padding : 0;
	}

	.dot{
	position :absolute;
	background :#000;
	width :1px;
	height :1px;
	overflow :hidden;
	}
	--></style>


	<form action="javascript:;" method="POST" name="f">
	中心座標X<input type="text" name="x" value="150"><br>
	中心座標Y<input type="text" name="y" value="150"><br>
	円の半径<input type="text" name="r" value="100"><br>
	頂点の数<input type="text" name="n" value="4"><br>
	<button onclick="javascript:create()">作成</button>
	</form>

	<div id="canvas" class="canvas"></div>
	<div id="result"></div>

	<script type="text/javascript"><!--
	function create(){
	var start = new Date*1;
	var canvas = document.getElementById('canvas');
	var dot_cache = document.createElement('div');

	canvas.innerHTML = '';

	function createCoordinates(x, y, r, n) {
	var ret = [];
	for(var i=0;i<n; i++) {
	var coordinates = {
	x: parseInt(x - (r * Math.cos(360/niMath.PI/180))),
	y: parseInt(y - (r * Math.sin(360/niMath.PI/180)))
	};
	ret.push(coordinates);
	}
	return ret;
	}

	function drawDot(x,y){
	var dot = document.createElement('span');
	dot.className = 'dot';
	dot.style.left = x + 'px';
	dot.style.top = y + 'px';
	dot_cache.appendChild(dot);
	}

	function drawLine(x1,y1,x2,y2) {
	if (x1==x2 && y1==y2) {return;}
	var x_move = x2-x1;
	var y_move = y2-y1;
	var x_diff = x_move<0 ? 1:-1;
	var y_diff = y_move<0 ? 1:-1;
	if (Math.abs(x_move) >= Math.abs(y_move)){
	for (var i=x_move; i!=0; i+=x_diff) {
	drawDot(x2-i, y2-Math.round(y_move*i / x_move));
	}
	} else {
	for (var i=y_move; i!=0; i+=y_diff) {
	drawDot(x2-Math.round(x_move*i / y_move), y2-i);
	}
	}
	}

	var f = document.f;
	var c = createCoordinates(
	parseInt(f.x.value, 10),
	parseInt(f.y.value, 10),
	parseInt(f.r.value, 10),
	parseInt(f.n.value, 10)
	);

	for(var i=0; i<c.length; ++i) {
	var x1 = c[i].x;
	var y1 = c[i].y;
	var x2 = (c[i+1])? c[i+1].x : c[0].x;
	var y2 = (c[i+1])? c[i+1].y : c[0].y;
	drawLine(x1, y1, x2, y2);
	}

	canvas.appendChild(dot_cache);

	document.getElementById('result').innerHTML = [(new Date*1)-start, 'msec'].join('');
	}
	//--></script>


	</body>
	</html>