DIR : /home/kozerus/public_html/go/canvas.html

/home/kozerus/public_html/go

<html>
<head>
	<title>/go/canvas.html 20211130_1330</title>
	<script id=startup_canvas>
		function startup_canvas(args) {
			htmout = "";
			ko_canvas("");
			return(htmout);
			}


		</script>

	<script id=ko_canvas>
		function ko_canvas(args) {
			htmout = "";
			var ko_canvas = document.getElementsByTagName('ko_canvas');
			ctx = null; color = "linen";
			if( ko_canvas.getContext('2d')) {
				ctx = ko_canvas.getContext('2d');
				ctx.clearRect(0,0,400,400);
				ctx.save();
				}

			if( ctx == null ) { return(htmout); }
//			grad = ctx.createRadialGradient(0,0,0,0,0,600);			
//			grad.addColorStop(0,'#000');
//			grad.addColorStop(1,'rgb('+color+', '+color+', '+color+')');

var x=0;
var y=0;
var dy=4;
var dx=4;
var WIDTH=1100;
var HEIGHT=800;

var img_ko = new Image();
var img_ok = new Image();
var img_koeye = new Image();
var img_koeyeb = new Image();
var img_koeyew = new Image();

var img_b = new Image();
var img_b_b = new Image();
var img_b_w = new Image();
var img_w = new Image();
var img_w_b = new Image();
var img_w_w = new Image();

var img_brd = new Image();
var img_brd_nw = new Image();
var img_brd_ne = new Image();
var img_brd_sw = new Image();
var img_brd_se = new Image();

img_ko="/imgs/btn/ko.png";
img_ok="/imgs/btn/ok.png";
img_koeye="/imgs/btn/koeye.png";
img_koeyeb="/imgs/btn/koeyeb.png";
img_koeyew="/imgs/btn/koeyew.png";
img_b="/go/dgs/images/50/b.gif";
img_b_b="/go/dgs/images/50/b_b.gif";
img_b_w="/go/dgs/images/50/b_2.gif";
img_w="/go/dgs/images/50/w.gif";
img_w_b="/go/dgs/images/50/w_b.gif";
img_w_w="/go/dgs/images/50/w_w.gif";

img_brd="/go/dgs/images/50/brd.png";
img_brd_nw="/go/dgs/images/50/brd_nw.png";
img_brd_ne="/go/dgs/images/50/brd_ne.png";
img_brd_sw="/go/dgs/images/50/brd_sw.png";
img_brd_se="/go/dgs/images/50/brd_se.png";

			ctx.drawImage(img_ko,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_ok,x,y); x=x+dx; y=y+dy;
			x=x+dx; y=y+dy;
			ctx.drawImage(img_koeye,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_koeyeb,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_koeyew,x,y); x=x+dx; y=y+dy;
			x=x+dx; y=y+dy;
			x=x+dx; y=y+dy;

			ctx.drawImage(img_b,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_b_b,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_b_w,x,y); x=x+dx; y=y+dy;
			x=x+dx; y=y+dy;
			x=x+dx; y=y+dy;
			ctx.drawImage(img_w,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_w_b,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_w_w,x,y); x=x+dx; y=y+dy;

			ctx.drawImage(img_brd,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_brd_nw,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_brd_ne,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_brd_sw,x,y); x=x+dx; y=y+dy;
			ctx.drawImage(img_brd_se,x,y); x=x+dx; y=y+dy;


			if( document.getElemntById("div_layer1")) {
				div_layer1 = document.getElemntById("div_layer1");
				div_ctx1 = div_layer1.getContext("2d");
				}
			if( document.getElemntById("div_layer2")) {
				div_layer2 = document.getElemntById("div_layer2");			
				div_ctx2 = div_layer2.getContext("2d");
				}
			if( document.getElemntById("div_layer3")) {
				div_layer3 = document.getElemntById("div_layer3");			
				div_ctx3 = div_layer3.getContext("2d");
				}

			ctx.clearRect(0,0,WIDTH,HEIGHT);
			ctx.fillStyle="#FAF7F8";
			ctx.begPath();
//			ctx.rect(0,0,WIDTH,HEIGHT);
			ctx.arc(x,y,10,0,Math.PI*2,true);
			ctx.closePath();
			ctx.fill();

			if(x+dx>WIDTH||x+dx<0) dx=-dx;			
			if(y+dy>HEIGHT||y+dy<0) dy=-dy;
			x+=dx;
			y+=dy;

			return(htmout);
			}
		</script>

	<script id=script_toggle>
		function toggle(divid,onoff) {
			alert( "MSG_100 toggle divid="+divid+" onoff="+onoff );
			}
		</script>
	</head>

<body bgcolor=linen onload="startup_canvas(''); return false;">
	<hr color=goldenrod>
	<img src=/imgs/btn/koeye.png id=img_ko_canvas onclick="toggle('div_ko_canvas');return false;" height=50>
	<hr color=goldenrod>
	<div id=div_ko_canvas>
		<hr color=goldenrod>
		<hr color=goldenrod>
		<h1>ko_canvas</h1>
		<hr color=goldenrod>
		<hr color=white>
		<hr color=black>
		<canvas id=ko_canvas height=800 width=800></canvas>
		<hr color=black>
		<hr color=white>
		<hr color=goldenrod>
		<hr color=goldenrod>
		</div>

	<div id=layer1><h3>div_layer1</h3></div>
	<div id=layer2><h3>div_layer2</h3></div>
	<div id=layer3><h3>div_layer3</h3></div>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer