Skip to content

Instantly share code, notes, and snippets.

@yymm

yymm/kasumi_mato.html

Created October 12, 2012 08:38
Show Gist options
  • Save yymm/3878089 to your computer and use it in GitHub Desktop.
Save yymm/3878089 to your computer and use it in GitHub Desktop.
Download ZIP
kasumi mato(Kyudo) using Canvas
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment