<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Trybest With HTML5 & CSS3 & canvas & JavaScript</title>

<style type="text/css">

body {
	overflow: hidden;
	margin: 0px;
}

#Trybest {
	background-color: #ffffff;
}

#loading {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 50%;
	font-size: 0.8em;
	color: #a0a0a0;
}

#not_canvas {
	display: none;
}

#main {
	visibility: hidden;
	cursor: pointer;
	cursor: hand;
}

.fadein {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.fadeout {
	animation: fadeout 2s ease 0s 1 normal;
	-webkit-animation:fadeout 2s ease 0s 1 normal;
	animation-fill-mode: forwards;
}

@keyframes fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.outer {
	position: relative;
}

.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

</style>

<script language="JavaScript" type="text/javascript"><!--

function fadein() {
	mid.style.visibility = "visible";
	mid.className = "fadein";
	lid.className = "fadeout";
	return false;
}

function fadeout() {
	lid.style.visibility = "visible";
	lid.className = "fadein";
	mid.className = "fadeout";
	return false;
}

function render() {

	mid = document.getElementById("main");
	lid = document.getElementById("loading");
	fadein();

function line(sx, sy, tx, ty, c) {
	context.fillStyle = "#"+c;
	var ang = Math.atan((ty-sy)/(tx-sx==0?0.01:tx-sx))+(tx-sx<0?Math.PI:0);
	for (var l=0; l<Math.sqrt((tx-sx)*(tx-sx)+(ty-sy)*(ty-sy)); l++) {
		context.fillRect(Math.round(sx+Math.cos(ang)*l), Math.round(sy+Math.sin(ang)*l), 1, 1);
	}
context.fill();
}

function circle(xc, yc, r, c) {
	context.fillStyle = "#"+c;
	var x = r, y = 0, cd = 0;
	context.rect(xc-x, yc, r<<1, 1);
	while (x>y) {
		cd-=(--x)-(++y);
		if (cd<0) cd+=x++;
		context.rect(xc-y, yc-x, y<<1, 1);
		context.rect(xc-x, yc-y, x<<1, 1);
		context.rect(xc-x, yc+y, x<<1, 1);
		context.rect(xc-y, yc+x, y<<1, 1);
	}
context.fill();
}

function paint(x, y, fc) {
	imgd = context.getImageData(0, 0, 1280, 800);
	var slcr = fc;
		if (x<0 || y<0 || x>=imgd.width || y>=imgd.height) {return;}
		if (typeof slcr==="string") {
			slcr = [parseInt(fc.substr(0, 2), 16), parseInt(fc.substr(2, 2), 16), parseInt(fc.substr(4, 2), 16)];
		}
	var scr = new Array(3);
	scr[0] = imgd.data[(y*imgd.width+x)*4];
	scr[1] = imgd.data[(y*imgd.width+x)*4+1];
	scr[2] = imgd.data[(y*imgd.width+x)*4+2];
	var ai = imgd.data[(y*imgd.width+x)*4+3];
	var ia = !Boolean(ai);
	if (ai!==0 && slcr[0]===scr[0] && slcr[1]===scr[1] && slcr[2]===scr[2]) {return;}
	var pr = [{x:x, y:y}];
	var idx, p;
	while(pr.length) {
		p=pr.pop();
		if (cc(imgd, p.x, p.y, scr, ia)) {
			idx = (p.y*imgd.width+p.x)*4;
			imgd.data[idx] = slcr[0];
			imgd.data[idx+1] = slcr[1];
			imgd.data[idx+2] = slcr[2];
			imgd.data[idx+3] = 255;
		if (cc(imgd, p.x, p.y-1, scr, ia)) {pr.push({x:p.x, y:p.y-1});}
		if (cc(imgd, p.x + 1, p.y, scr, ia)) {pr.push({x:p.x+1, y:p.y});}
		if (cc(imgd, p.x, p.y + 1, scr, ia)) {pr.push({x:p.x, y:p.y+1});}
		if (cc(imgd, p.x-1, p.y, scr, ia)) {pr.push({x:p.x-1, y:p.y});}
	}
}
context.putImageData(imgd, 0, 0);
}

function cc(imgd, x, y, scr, ia) {
	if (x<0 || y<0 || x>= imgd.width || y>= imgd.height) {return false;}
	var ccr = new Array(3);
	ccr[0] = imgd.data[(y*imgd.width+x)*4];
	ccr[1] = imgd.data[(y*imgd.width+x)*4+1];
	ccr[2] = imgd.data[(y*imgd.width+x)*4+2];
	var ai = imgd.data[(y*imgd.width+x)*4+3];
	if (ai !== 0) {
		if (scr[0]!==ccr[0] || scr[1]!==ccr[1] || scr[2]!==ccr[2]) {return false;}
		if (ia) {return false;}
	}
	else if (ai===0 && !ia) {return false;}
return true;
}

if (window.HTMLCanvasElement) {
	var tr = new Array ("0000ff",0,15,280,100,"ff0000",21,85,360,100,"ffffff",91,127,208,268,"ffff00",133,148,204,264,"ffff00",154,176,360,260,"ffffff",182,204,356,256);
	var tb = new Array (
	305,15,15,385,310,16,5,20,390,310,390,21,385,5,315,15,315,385,310,385,5,330,390,620,390,618,385,5,335,15,438,148,330,16,5,456,170,621,381,330,205,5,429,213,529,343,330,355,5,360,154,435,
	154,330,385,5,360,166,450,166,435,150,4,330,210,425,210,360,160,6,330,350,525,350,451,171,5,325,15,325,205,424,215,5,325,355,325,385,525,345,5,253,170,121,344,257,173,5,125,350,257,350,
	126,345,5,262,174,262,345,257,345,5,0,0,0,0,363,160,5,0,0,0,0,423,219,8,0,0,0,0,523,344,5,246,195,145,333,249,198,4,148,340,248,340,149,335,5,253,196,253,335,248,335,5,330,220,413,220,330,
	225,5,418,223,503,335,413,225,5,325,225,325,335,330,335,5,330,340,497,340,497,335,5,350,245,400,245,350,250,5,350,320,450,320,399,250,5,403,248,453,313,350,315,5,345,250,345,315,449,315,5
	);

	var canvas = document.getElementById("Trybest");
	var context = canvas.getContext("2d");

	for (n=0; n<30; n=n+5) {
		context.beginPath();
		for (i=tr[n+1]; i<tr[n+2]; i=i+7) {
			line(tb[i]*2, tb[i+1]*2, tb[i+2]*2, tb[i+3]*2, tr[n]);
			circle(tb[i+4]*2, tb[i+5]*2, tb[i+6]*2, tr[n]);
		}
		paint(tr[n+3]*2, tr[n+4]*2, tr[n]);
	}

//		canvas.style.width = "640px";
//		canvas.style.height = "400px";

		canvas.style.width = "320px";
		canvas.style.height = "200px";

}
}

//--></script>

</head>


<body onclick="location.reload();" onload="setTimeout('render();',100);" onBeforeUnload="fadeout();" scroll="no">

<div id='loading'>Just a moment.</div>

<div class="outer" id="main">
	<div class="inner">
		<canvas width="1280" height="800" id="Trybest"></canvas>
	</div>
</div>

</body>

</html>