yymm/kasumi_mato.html

## kasumi_mato.html
<script type="text/javascript">
onload = function() {
  draw0();
  draw1();
  draw2();
  draw3();
  draw4();
  draw5();
};
/* 中白 */
function draw0() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.arc(500, 500, 180, 0, Math.PI*2, true);
  ctx.fill();
}
/* 1の黒 */
function draw1() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(255, 255, 255)';
  ctx.arc(500, 500, 147, 0, Math.PI*2, true);
  ctx.fill();
}
/* 2の白 */
function draw2() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.arc(500, 500, 117, 0, Math.PI*2, true);
  ctx.fill();
}
/* 2の黒 */
function draw3() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(255, 255, 255)';
  ctx.arc(500, 500, 102, 0, Math.PI*2, true);
  ctx.fill();
}
/* 3の白 */
function draw4() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.arc(500, 500, 72, 0, Math.PI*2, true);
  ctx.fill();
}
/* 外黒 */
function draw5() {
  var canvas = document.getElementById('canvas_area');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(255, 255, 255)';
  ctx.arc(500, 500, 36, 0, Math.PI*2, true);
  ctx.fill();
}
</script>

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Kasumi</title>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  </head>
  <body>
    <h1>Kasumi Mato</h1>
    <canvas id="canvas_area" width="1000" height="1000"></canvas>
  </body>
</html>
	<script type="text/javascript">
	onload = function() {
	draw0();
	draw1();
	draw2();
	draw3();
	draw4();
	draw5();
	};
	/* 中白 */
	function draw0() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.arc(500, 500, 180, 0, Math.PI*2, true);
	ctx.fill();
	}
	/* 1の黒 */
	function draw1() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(255, 255, 255)';
	ctx.arc(500, 500, 147, 0, Math.PI*2, true);
	ctx.fill();
	}
	/* 2の白 */
	function draw2() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.arc(500, 500, 117, 0, Math.PI*2, true);
	ctx.fill();
	}
	/* 2の黒 */
	function draw3() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(255, 255, 255)';
	ctx.arc(500, 500, 102, 0, Math.PI*2, true);
	ctx.fill();
	}
	/* 3の白 */
	function draw4() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.arc(500, 500, 72, 0, Math.PI*2, true);
	ctx.fill();
	}
	/* 外黒 */
	function draw5() {
	var canvas = document.getElementById('canvas_area');
	if ( ! canvas \|\| ! canvas.getContext ) { return false; }
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillStyle = 'rgb(255, 255, 255)';
	ctx.arc(500, 500, 36, 0, Math.PI*2, true);
	ctx.fill();
	}
	</script>

	<?xml version="1.0" encoding="UTF-8"?>
	<!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" xml:lang="ja" lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="ja" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>Kasumi</title>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	</head>
	<body>
	<h1>Kasumi Mato</h1>
	<canvas id="canvas_area" width="1000" height="1000"></canvas>
	</body>
	</html>