memememomo · May 11, 2010 03:49
diff --git a/canvas.html b/canvas.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT¥
 D/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <style type="text/css">
 canvas {
    border: solid 3px #000;
 }
 </style>
 <script type="text/javascript">
 window.onload = function() {
    var canvas = document.getElementById('canvas');
    var cc = canvas.getContext('2d');

    var grid = 50;
    var lineColor = 'rgb(200,200,200)';

    for (var i = 0; i < canvas.height/grid; i++) {
       cc.save();
       cc.beginPath();
       cc.strokeStyle = lineColor;
       cc.lineTo(0, i * grid);
       cc.lineTo(canvas.width, i * grid);
       cc.stroke();
       cc.restore();
    }


    for (var i = 0; i < canvas.width/grid; i++) {
       cc.save();
       cc.beginPath();
       cc.strokeStyle =lineColor;
       cc.lineTo(i * grid, 0);
       cc.lineTo(i * grid, canvas.height);
       cc.stroke();
       cc.restore();
    }

    var w_center = canvas.height/2;
    var h_center = canvas.width/2;
    cc.save();
    cc.beginPath();
    cc.strokeStyle = 2;
    cc.lineTo(w_center,0);
    cc.lineTo(w_center,canvas.height);
    cc.stroke();
    cc.restore();

    cc.save();
    cc.beginPath();
    cc.strokeStyle = 2;
    cc.lineTo(0, h_center);
    cc.lineTo(canvas.width, h_center);
    cc.stroke();
    cc.restore();

    cc.translate(canvas.width / 2, canvas.height / 2);

    lineToStroke(cc, 0, 1, 6, 4, grid);
    lineToStroke(cc, 3, 6, 5, 0, grid);
 }

 function lineToStroke(cc, x1, y1, x2, y2, grid, color, width) {
    x1 *= grid;
    y1 *= -grid;
    x2 *= grid;
    y2 *= -grid;

    cc.save();
    cc.beginPath();
    cc.lineWidth = (width != null) ? width : null;
    cc.strokeStyle = (color != null) ? color : null;
    cc.lineTo(x1, y1);
    cc.lineTo(x2, y2);
    cc.stroke();
    cc.restore();
 }
 </script>
 <title></title>
 </head>
 <body>
 <canvas id="canvas" width="600" height="600"></canvas>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT¥
	D/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<style type="text/css">
	canvas {
	border: solid 3px #000;
	}
	</style>
	<script type="text/javascript">
	window.onload = function() {
	var canvas = document.getElementById('canvas');
	var cc = canvas.getContext('2d');

	var grid = 50;
	var lineColor = 'rgb(200,200,200)';

	for (var i = 0; i < canvas.height/grid; i++) {
	cc.save();
	cc.beginPath();
	cc.strokeStyle = lineColor;
	cc.lineTo(0, i * grid);
	cc.lineTo(canvas.width, i * grid);
	cc.stroke();
	cc.restore();
	}


	for (var i = 0; i < canvas.width/grid; i++) {
	cc.save();
	cc.beginPath();
	cc.strokeStyle =lineColor;
	cc.lineTo(i * grid, 0);
	cc.lineTo(i * grid, canvas.height);
	cc.stroke();
	cc.restore();
	}

	var w_center = canvas.height/2;
	var h_center = canvas.width/2;
	cc.save();
	cc.beginPath();
	cc.strokeStyle = 2;
	cc.lineTo(w_center,0);
	cc.lineTo(w_center,canvas.height);
	cc.stroke();
	cc.restore();

	cc.save();
	cc.beginPath();
	cc.strokeStyle = 2;
	cc.lineTo(0, h_center);
	cc.lineTo(canvas.width, h_center);
	cc.stroke();
	cc.restore();

	cc.translate(canvas.width / 2, canvas.height / 2);

	lineToStroke(cc, 0, 1, 6, 4, grid);
	lineToStroke(cc, 3, 6, 5, 0, grid);
	}

	function lineToStroke(cc, x1, y1, x2, y2, grid, color, width) {
	x1 *= grid;
	y1 *= -grid;
	x2 *= grid;
	y2 *= -grid;

	cc.save();
	cc.beginPath();
	cc.lineWidth = (width != null) ? width : null;
	cc.strokeStyle = (color != null) ? color : null;
	cc.lineTo(x1, y1);
	cc.lineTo(x2, y2);
	cc.stroke();
	cc.restore();
	}
	</script>
	<title></title>
	</head>
	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	</body>
	</html>