lolicsystem/helix_globe_on_canvas.html

## helix_globe_on_canvas.html
<html>
  <head>
    <title>helix on the globe on canvas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- IEな場合、excanvas.js をどっかから取ってきて、同一ディレクトリに配置し、本コメントを外す。
    <script type="text/javascript" src="excanvas.js"></script>
    -->
    <script type="text/javascript">

      function onLoad() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext('2d');

          var planez = 5;
          var i;

          var step = 40;        // 描線の細かさ。
                                // step*180の線分で、渦巻き地球を描く
          context.beginPath();
          for (i=0; i < 180 * step; i=i+1) {
              var t = i / step - 90;
              var u = t * 72;
              var r = 5 * Math.cos(deg2rad(t));
              var objx = r * Math.cos(deg2rad(u));
              var objz = r * Math.sin(deg2rad(u)) + 10;
              var objy = 5 * Math.sin(deg2rad(t));

              var x = planez / objz * objx;
              var y = planez / objz * objy;

              if (i == 0) {
                  context.moveTo(x * 150 + 500, y * 150 + 500);
              } else {
                  context.lineTo(x * 150 + 500, y * 150 + 500);
              }
          }
          context.stroke();
      }

      function deg2rad(deg) {
          return deg * Math.PI / 180;
      }

    </script>
  </head>
  <body onload="onLoad();">
    <canvas id="canvas" width="1000" height="1000"></canvas>
  </body>
</html>
	<html>
	<head>
	<title>helix on the globe on canvas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- IEな場合、excanvas.js をどっかから取ってきて、同一ディレクトリに配置し、本コメントを外す。
	<script type="text/javascript" src="excanvas.js"></script>
	-->
	<script type="text/javascript">

	function onLoad() {
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext('2d');

	var planez = 5;
	var i;

	var step = 40; // 描線の細かさ。
	// step*180の線分で、渦巻き地球を描く
	context.beginPath();
	for (i=0; i < 180 * step; i=i+1) {
	var t = i / step - 90;
	var u = t * 72;
	var r = 5 * Math.cos(deg2rad(t));
	var objx = r * Math.cos(deg2rad(u));
	var objz = r * Math.sin(deg2rad(u)) + 10;
	var objy = 5 * Math.sin(deg2rad(t));

	var x = planez / objz * objx;
	var y = planez / objz * objy;

	if (i == 0) {
	context.moveTo(x * 150 + 500, y * 150 + 500);
	} else {
	context.lineTo(x * 150 + 500, y * 150 + 500);
	}
	}
	context.stroke();
	}

	function deg2rad(deg) {
	return deg * Math.PI / 180;
	}

	</script>
	</head>
	<body onload="onLoad();">
	<canvas id="canvas" width="1000" height="1000"></canvas>
	</body>
	</html>