DIR : /home/kozerus/public_html/canvas2.html
/home/kozerus/public_html
<html>
<head>
<title>-= canvas.html =- CANVAS -= 20190213_1900 =-</title>
</head>
<body>
<div id="div_wtn_canvas_w" >
<button type="button" onclick="balls_n_cubes('/imgs/btn/ok.png')">balls_n_cubes</button>
<button onclick="showfilltext_w();return true;">filltxt</button>
<button onclick="showstroketext_w();return true;">stroketxt</button>
<button onclick="cleartext_w();return true;">cleartxt</button>
<button onclick="draw_dragon_w();return true;">dragon</button>
<button onclick="draw_smaller_dragon_w();return true;">dragonette</button>
<button onclick="draw_dragon_head_w();return true;">draghead</button>
<button onclick="clearimage_w();return true;">clearimg</button>
</div>
<div id="div_canvas_w" style="background:tan; position:relative; width:800px; height:120px">
<canvas id="layer_w1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_w2"
style="z-index: 2;
position:absolute;
n left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_w3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<canvas id="layer_w4"
style="z-index: 4;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged b
</canvas>
<canvas id="layer_w5"
style="z-index: 5;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_w6"
style="z-index: 6;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_w7"
style="z-index: 7;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<script id ="script_canvas_walls_n_cubes_w" type="text/javascript">
var layer_w1; var layer_w2; var layer_w3;
var layer_w4; var layer_w5; var layer_w6; var layer_w7;
var layer_w; var layer_w; var layer_i; var layer_t;
var ctx_w1; var ctx_w2; var ctx_w3;
var ctx_w_w; var ctx_w_w; var ctx_w_i; var ctx_w_t;
var x = 800; var y = 100; var dx = 2; var dy = 4;
var b_x = 800; var b_y = 100; var b_dx = 2; var b_dy = 4;
var w_x = 800; var w_y = 100; var w_dx = 2; var w_dy = 4;
var i_x = 800; var i_y = 100; var i_dx = 2; var i_dy = 4;
var t_x = 800; var t_y = 100; var t_dx = 2; var t_dy = 4;
var WIDTH = 800;
var HEIGHT = 100;
var city = new Image();
var city_w = new Image();
var city_w = new Image();
var img_w = new Image();
var img_w = new Image();
var gif = new Image();
var img = new Image();
var txt = new Image();
img_new = new Image();
img_mask = new Image();
img_mask_w = new Image();
img_mask_w = new Image();
img_mask_ko = new Image();
img_mask_kow = new Image();
img_mask_kob = new Image();
img_mask_koeye = new Image();
img_mask_koeyew = new Image();
img_mask_koeyeb = new Image();
myimg="";
myimg="/imgs/btn/koeye_handhi.gif";
myimg="/imgs/btn/koeye_handhither.gif";
balls_n_cubes_w( myimg );
function showfilltext_w() {
ctx_w_t.fillStyle = '#f00';
ctx_w_t.fillStyle = 'yellow';
// ctx_w_t.font = 'italic bold 30px sans-serif';
ctx_w_t.font = 'italic bold 40px yokkmokkOT';
ctx_w_t.textBaseline = 'bottom';
ctx_w_t.fillText('timejaks: jkwii is here', 50, 100);
}
function showstroketext_w() {
ctx_w_t.strokeStyle = "#003300";
ctx_w_t.font = '40px san-serif';
ctx_w_t.textBaseline = 'bottom';
ctx_w_t.strokeText('timejaks jkwii is us', 300, 100);
}
// textBaseline top,hanging,middle,alphabetic,ideographic,bottom default: alphabetic
function cleartext_w() {
ctx_w_t.textBaseline = "top";
ctx_w_t.fillText('Top', 5, 100);
ctx_w_t.textBaseline = "bottom";
ctx_w_t.fillText('Bottom', 80, 100);
ctx_w_t.textBaseline = "middle";
ctx_w_t.fillText('Middle', 200, 100);
ctx_w_t.textBaseline = "alphabetic";
ctx_w_t.fillText('Alphabetic', 300, 100);
ctx_w_t.textBaseline = "hanging";
ctx_w_t.fillText('Hanging', 400, 100);
ctx_w_t.clearRect(1, 1, 600, 300);
}
var dragon = new Image();
function draw_dragon_w() {
ctx_w_i.drawImage(dragon, 100, 5);
}
function draw_smaller_dragon_w() {
ctx_w_i.drawImage(dragon, 10, 5, 58, 100);
}
function draw_dragon_head_w() {
ctx_w_i.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
}
function clearimage_w() {
ctx_w_i.clearRect(1, 1, 600, 300);
}
function balls_n_cubes_w(myimg) {
imgs_new = new Array(); z=0;
imgs_new[z++] = "/imgs/btn/koeye_handhi.gif";
imgs_new[z++] = "/imgs/btn/ko.png";
imgs_new[z++] = "/imgs/btn/ok.png";
imgs_new[z++] = "/imgs/btn/koeyew.png";
imgs_new[z++] = "/imgs/btn/koeyeb.png";
imgs_new[z++] = "/imgs/btn/koeye.png";
imgs_new[z++] = "/imgs/btn/koeye_handhither.gif";
if( myimg == "" ) {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = "/imgs/btn/koeye_handhi.gif";
}
else {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = myimg;
}
return( img_new );
}
function init_walls_n_cubes_w(myimg) {
// alert( "BUGS_5810 balls_n_cubes myimg="+myimg );
interval_w=50;
city.src ="/imgs/btn/koeye.png";
city_w.src ="/imgs/btn/koeyeb.png";
city_w.src ="/imgs/btn/koeyew.png";
img.src ="/imgs/btn/kob.png";
txt.src ="/imgs/btn/kow.png";
img_w.src ="/imgs/btn/koeyeb.png";
img_w.src ="/imgs/btn/koeyew.png";
img_mask.src ="/imgs/btn/kob.png";
img_mask_w.src ="/imgs/btn/kob.png";
img_mask_w.src ="/imgs/btn/kob.png";
img_mask_koeye.src = "/imgs/btn/koeye_mask.png";
img_mask_koeyew.src = "/imgs/btn/koeyew_mask.png";
img_mask_koeyeb.src = "/imgs/btn/koeyeb_mask.png";
img_mask_ko.src = "/imgs/btn/ko_mask.png";
img_mask_kow.src = "/imgs/btn/kow_mask.png";
img_mask_kob.src = "/imgs/btn/kob_mask.png";
gif.src = "/imgs/btn/koeye_handhither.gif";
gif.src = img_new.src;
layer_w1 = document.getElementById("layer_w1");
layer_w2 = document.getElementById("layer_w2");
layer_w3 = document.getElementById("layer_w3");
layer_w4 = document.getElementById("layer_w4");
layer_w5 = document.getElementById("layer_w5");
layer_w6 = document.getElementById("layer_w6");
layer_w7 = document.getElementById("layer_w7");
ctx_w1 = layer_w1.getContext("2d");
ctx_w2 = layer_w2.getContext("2d");
ctx_w3 = layer_w3.getContext("2d");
ctx_w_w = layer_w4.getContext("2d");
ctx_w_w = layer_w5.getContext("2d");
ctx_w_i = layer_w6.getContext("2d");
ctx_w_t = layer_w7.getContext("2d");
setInterval(drawall_w, interval_w);
}
function draw_w1() {
ctx_w1.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w1.fillStyle = "#FAF7F8";
ctx_w1.fillStyle = "darkslaegrey";
ctx_w1.beginPath();
ctx_w1.rect(0,0,WIDTH,HEIGHT);
ctx_w1.closePath();
ctx_w1.fill();
ctx_w1.fillStyle = "#444444";
ctx_w1.beginPath();
ctx_w1.arc(x, y, 10, 0, Math.PI*2, true);
ctx_w1.closePath();
ctx_w1.fill();
if (x + dx > WIDTH || x + dx < 0) dx = -dx;
if (y + dy > HEIGHT || y + dy < 0) dy = -dy;
x += dx;
y += dy;
}
function draw_wb() {
ctx_w_w.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w_w.fillStyle = "#FAF7F8";
ctx_w_w.fillStyle = "darkslaegrey";
ctx_w_w.beginPath();
ctx_w_w.rect(0,0,WIDTH,HEIGHT);
ctx_w_w.closePath();
ctx_w_w.fill();
ctx_w_w.fillStyle = "red";
ctx_w_w.beginPath();
ctx_w_w.arc(b_x, b_y, 10, 0, Math.PI*2, true);
ctx_w_w.closePath();
ctx_w_w.fill();
if (b_x + b_dx > WIDTH || b_x + b_dx < 0) b_dx = -b_dx;
if (b_y + b_dy > HEIGHT || b_y + b_dy < 0) b_dy = -b_dy;
b_x += b_dx;
b_y += b_dy;
}
function draw_ww() {
ctx_w_w.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w_w.fillStyle = "darkslaegrey";
ctx_w_w.beginPath();
ctx_w_w.rect(0,0,WIDTH,HEIGHT);
ctx_w_w.closePath();
ctx_w_w.fill();
ctx_w_w.fillStyle = "#444444";
ctx_w_w.fillStyle = "yellow";
ctx_w_w.fillStyle = "darkslategrey";
ctx_w_w.beginPath();
ctx_w_w.arc(w_x, w_y, 10, 0, Math.PI*2, true);
ctx_w_w.closePath();
ctx_w_w.fill();
if (w_x + w_dx > WIDTH || w_x + w_dx < 0) w_dx = -w_dx;
if (w_y + w_dy > HEIGHT || w_y + w_dy < 0) w_dy = -w_dy;
w_x += w_dx; w_y += w_dy;
}
function draw_w2() {
ctx_w2.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w2.drawImage(city, WIDTH/2-100, 10 );
ctx_w2.drawImage(city_w, WIDTH/2-100, 10 );
ctx_w2.drawImage(city_w, WIDTH/2-100, 10 );
ctx_w2.drawImage(gif, WIDTH/2-100, 10 );
}
function draw_wi() {
ctx_w_i.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w_i.drawImage(img, WIDTH/2-100, 10 );
}
function draw_wt() {
txt="timejaks: jkwii";
ctx_w_t.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w_t.fillStyle = 'black';
ctx_w_t.fillStyle = 'goldenrod';
ctx_w_t.fillStyle = 'darkslategrey';
ctx_w_t.font = '50px yokkmokkOT';
ctx_w_t.textBaseline = 'bottom';
ctx_w_t.fillText("timejaks: jkwii is where", x, y);
// alert( "BUGS_5900 drat_t txt="+txt );
}
function draw_w3() {
ctx_w3.clearRect(0, 0, WIDTH, HEIGHT);
ctx_w3.fillStyle = "#444444";
ctx_w3.save();
ctx_w3.translate(400,50);
ctx_w3.rotate(x/20);
ctx_w3.fillRect(10, 0, 25, 25);
ctx_w3.restore();
}
function drawall_w() {
draw_wb();
draw_ww();
draw_wi();
draw_wt();
draw_w1();
draw_w2();
draw_w3();
}
init_walls_n_cubes_w(myimg);
</script>
<div id="div_bwtn_canvas_bw" >
<button type="button" onclick="balls_n_cubes('/imgs/btn/ok.png')">balls_n_cubes</button>
<button onclick="showfilltext_bw();return true;">filltxt</button>
<button onclick="showstroketext_bw();return true;">stroketxt</button>
<button onclick="cleartext_bw();return true;">cleartxt</button>
<button onclick="draw_dragon_bw();return true;">dragon</button>
<button onclick="draw_smaller_dragon_bw();return true;">dragonette</button>
<button onclick="draw_dragon_head_bw();return true;">draghead</button>
<button onclick="clearimage_bw();return true;">clearimg</button>
</div>
<div id="div_canvas_bw" style="background:tan; position:relative; width:800px; height:120px">
<canvas id="layer_bw1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_bw2"
style="z-index: 2;
position:absolute;
n left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_bw3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<canvas id="layer_bw4"
style="z-index: 4;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged b
</canvas>
<canvas id="layer_bw5"
style="z-index: 5;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_bw6"
style="z-index: 6;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_bw7"
style="z-index: 7;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<script id ="script_canvas_bwalls_n_cubes_bw" type="text/javascript">
var layer_bw1; var layer_bw2; var layer_bw3;
var layer_bw4; var layer_bw5; var layer_bw6; var layer_bw7;
var layer_bw; var layer_bw; var layer_i; var layer_t;
var ctx_bw1; var ctx_bw2; var ctx_bw3;
var ctx_bw_bw; var ctx_bw_bw; var ctx_bw_i; var ctx_bw_t;
var x = 800; var y = 100; var dx = 2; var dy = 4;
var b_x = 800; var b_y = 100; var b_dx = 2; var b_dy = 4;
var w_x = 800; var w_y = 100; var w_dx = 2; var w_dy = 4;
var i_x = 800; var i_y = 100; var i_dx = 2; var i_dy = 4;
var t_x = 800; var t_y = 100; var t_dx = 2; var t_dy = 4;
var WIDTH = 800;
var HEIGHT = 100;
var city = new Image();
var city_bw = new Image();
var city_bw = new Image();
var img_bw = new Image();
var img_bw = new Image();
var gif = new Image();
var img = new Image();
var txt = new Image();
img_new = new Image();
img_mask = new Image();
img_mask_bw = new Image();
img_mask_bw = new Image();
img_mask_ko = new Image();
img_mask_kow = new Image();
img_mask_kob = new Image();
img_mask_koeye = new Image();
img_mask_koeyew = new Image();
img_mask_koeyeb = new Image();
myimg="";
myimg="/imgs/btn/koeye_handhi.gif";
myimg="/imgs/btn/koeye_handhither.gif";
balls_n_cubes_bw( myimg );
function showfilltext_bw() {
ctx_bw_t.fillStyle = '#f00';
ctx_bw_t.fillStyle = 'yellow';
// ctx_bw_t.font = 'italic bold 30px sans-serif';
ctx_bw_t.font = 'italic bold 40px yokkmokkOT';
ctx_bw_t.textBaseline = 'bottom';
ctx_bw_t.fillText('timejaks: jkwii is here', 50, 100);
}
function showstroketext_bw() {
ctx_bw_t.strokeStyle = "#003300";
ctx_bw_t.font = '40px san-serif';
ctx_bw_t.textBaseline = 'bottom';
ctx_bw_t.strokeText('timejaks jkwii is us', 300, 100);
}
// textBaseline top,hanging,middle,alphabetic,ideographic,bottom default: alphabetic
function cleartext_bw() {
ctx_bw_t.textBaseline = "top";
ctx_bw_t.fillText('Top', 5, 100);
ctx_bw_t.textBaseline = "bottom";
ctx_bw_t.fillText('Bottom', 80, 100);
ctx_bw_t.textBaseline = "middle";
ctx_bw_t.fillText('Middle', 200, 100);
ctx_bw_t.textBaseline = "alphabetic";
ctx_bw_t.fillText('Alphabetic', 300, 100);
ctx_bw_t.textBaseline = "hanging";
ctx_bw_t.fillText('Hanging', 400, 100);
ctx_bw_t.clearRect(1, 1, 600, 300);
}
var dragon = new Image();
function draw_dragon_bw() {
ctx_bw_i.drawImage(dragon, 100, 5);
}
function draw_smaller_dragon_bw() {
ctx_bw_i.drawImage(dragon, 10, 5, 58, 100);
}
function draw_dragon_head_bw() {
ctx_bw_i.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
}
function clearimage_bw() {
ctx_bw_i.clearRect(1, 1, 600, 300);
}
function balls_n_cubes_bw(myimg) {
imgs_new = new Array(); z=0;
imgs_new[z++] = "/imgs/btn/koeye_handhi.gif";
imgs_new[z++] = "/imgs/btn/ko.png";
imgs_new[z++] = "/imgs/btn/ok.png";
imgs_new[z++] = "/imgs/btn/koeyew.png";
imgs_new[z++] = "/imgs/btn/koeyeb.png";
imgs_new[z++] = "/imgs/btn/koeye.png";
imgs_new[z++] = "/imgs/btn/koeye_handhither.gif";
if( myimg == "" ) {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = "/imgs/btn/koeye_handhi.gif";
}
else {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = myimg;
}
return( img_new );
}
function init_bwalls_n_cubes_bw(myimg) {
// alert( "BUGS_5810 balls_n_cubes myimg="+myimg );
interval_bw=10;
city.src ="/imgs/btn/koeye.png";
city_bw.src ="/imgs/btn/koeyeb.png";
city_bw.src ="/imgs/btn/koeyew.png";
img.src ="/imgs/btn/kob.png";
txt.src ="/imgs/btn/kow.png";
img_bw.src ="/imgs/btn/koeyeb.png";
img_bw.src ="/imgs/btn/koeyew.png";
img_mask.src ="/imgs/btn/kob.png";
img_mask_bw.src ="/imgs/btn/kob.png";
img_mask_bw.src ="/imgs/btn/kob.png";
img_mask_koeye.src = "/imgs/btn/koeye_mask.png";
img_mask_koeyew.src = "/imgs/btn/koeyew_mask.png";
img_mask_koeyeb.src = "/imgs/btn/koeyeb_mask.png";
img_mask_ko.src = "/imgs/btn/ko_mask.png";
img_mask_kow.src = "/imgs/btn/kow_mask.png";
img_mask_kob.src = "/imgs/btn/kob_mask.png";
gif.src = "/imgs/btn/koeye_handhither.gif";
gif.src = img_new.src;
layer_bw1 = document.getElementById("layer_bw1");
layer_bw2 = document.getElementById("layer_bw2");
layer_bw3 = document.getElementById("layer_bw3");
layer_bw4 = document.getElementById("layer_bw4");
layer_bw5 = document.getElementById("layer_bw5");
layer_bw6 = document.getElementById("layer_bw6");
layer_bw7 = document.getElementById("layer_bw7");
ctx_bw1 = layer_bw1.getContext("2d");
ctx_bw2 = layer_bw2.getContext("2d");
ctx_bw3 = layer_bw3.getContext("2d");
ctx_bw_bw = layer_bw4.getContext("2d");
ctx_bw_bw = layer_bw5.getContext("2d");
ctx_bw_i = layer_bw6.getContext("2d");
ctx_bw_t = layer_bw7.getContext("2d");
setInterval(drawall_bw, interval_bw);
}
function draw_bw1() {
ctx_bw1.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw1.fillStyle = "#FAF7F8";
ctx_bw1.fillStyle = "darkslaegrey";
ctx_bw1.beginPath();
ctx_bw1.rect(0,0,WIDTH,HEIGHT);
ctx_bw1.closePath();
ctx_bw1.fill();
ctx_bw1.fillStyle = "#444444";
ctx_bw1.beginPath();
ctx_bw1.arc(x, y, 10, 0, Math.PI*2, true);
ctx_bw1.closePath();
ctx_bw1.fill();
if (x + dx > WIDTH || x + dx < 0) dx = -dx;
if (y + dy > HEIGHT || y + dy < 0) dy = -dy;
x += dx;
y += dy;
}
function draw_bwb() {
ctx_bw_bw.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw_bw.fillStyle = "#FAF7F8";
ctx_bw_bw.fillStyle = "darkslaegrey";
ctx_bw_bw.beginPath();
ctx_bw_bw.rect(0,0,WIDTH,HEIGHT);
ctx_bw_bw.closePath();
ctx_bw_bw.fill();
ctx_bw_bw.fillStyle = "red";
ctx_bw_bw.beginPath();
ctx_bw_bw.arc(b_x, b_y, 10, 0, Math.PI*2, true);
ctx_bw_bw.closePath();
ctx_bw_bw.fill();
if (b_x + b_dx > WIDTH || b_x + b_dx < 0) b_dx = -b_dx;
if (b_y + b_dy > HEIGHT || b_y + b_dy < 0) b_dy = -b_dy;
b_x += b_dx;
b_y += b_dy;
}
function draw_bww() {
ctx_bw_bw.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw_bw.fillStyle = "darkslaegrey";
ctx_bw_bw.beginPath();
ctx_bw_bw.rect(0,0,WIDTH,HEIGHT);
ctx_bw_bw.closePath();
ctx_bw_bw.fill();
ctx_bw_bw.fillStyle = "#444444";
ctx_bw_bw.fillStyle = "yellow";
ctx_bw_bw.fillStyle = "darkslategrey";
ctx_bw_bw.beginPath();
ctx_bw_bw.arc(w_x, w_y, 10, 0, Math.PI*2, true);
ctx_bw_bw.closePath();
ctx_bw_bw.fill();
if (w_x + w_dx > WIDTH || w_x + w_dx < 0) w_dx = -w_dx;
if (w_y + w_dy > HEIGHT || w_y + w_dy < 0) w_dy = -w_dy;
w_x += w_dx; w_y += w_dy;
}
function draw_bw2() {
ctx_bw2.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw2.drawImage(city, WIDTH/2-100, 10 );
ctx_bw2.drawImage(city_bw, WIDTH/2-100, 10 );
ctx_bw2.drawImage(city_bw, WIDTH/2-100, 10 );
ctx_bw2.drawImage(gif, WIDTH/2-100, 10 );
}
function draw_bwi() {
ctx_bw_i.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw_i.drawImage(img, WIDTH/2-100, 10 );
}
function draw_bwt() {
txt="timejaks: jkwii";
ctx_bw_t.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw_t.fillStyle = 'black';
ctx_bw_t.fillStyle = 'goldenrod';
ctx_bw_t.fillStyle = 'darkslategrey';
ctx_bw_t.font = '50px yokkmokkOT';
ctx_bw_t.textBaseline = 'bottom';
ctx_bw_t.fillText("timejaks: jkwii is where", x, y);
// alert( "BUGS_5900 drat_t txt="+txt );
}
function draw_bw3() {
ctx_bw3.clearRect(0, 0, WIDTH, HEIGHT);
ctx_bw3.fillStyle = "#444444";
ctx_bw3.save();
ctx_bw3.translate(400,50);
ctx_bw3.rotate(x/20);
ctx_bw3.fillRect(10, 0, 25, 25);
ctx_bw3.restore();
}
function drawall_bw() {
draw_bwb();
draw_bww();
draw_bwi();
draw_bwt();
draw_bw1();
draw_bw2();
draw_bw3();
}
init_bwalls_n_cubes_bw(myimg);
</script>
<div id="div_btn_canvas_b" >
<button type="button" onclick="balls_n_cubes('/imgs/btn/ok.png')">balls_n_cubes</button>
<button onclick="showfilltext_b();return true;">filltxt</button>
<button onclick="showstroketext_b();return true;">stroketxt</button>
<button onclick="cleartext_b();return true;">cleartxt</button>
<button onclick="draw_dragon_b();return true;">dragon</button>
<button onclick="draw_smaller_dragon_b();return true;">dragonette</button>
<button onclick="draw_dragon_head_b();return true;">draghead</button>
<button onclick="clearimage_b();return true;">clearimg</button>
</div>
<div id="div_canvas_b" style="background:tan; position:relative; width:800px; height:120px">
<canvas id="layer_b1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_b2"
style="z-index: 2;
position:absolute;
n left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_b3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<canvas id="layer_b4"
style="z-index: 4;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged b
</canvas>
<canvas id="layer_b5"
style="z-index: 5;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_b6"
style="z-index: 6;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
<canvas id="layer_b7"
style="z-index: 7;
position:absolute;
left:0px;
top:0px; "
height="100px" width="800"> unauthorized access logged
</canvas>
</div>
<script id ="script_canvas_balls_n_cubes_b" type="text/javascript">
var layer_b1; var layer_b2; var layer_b3;
var layer_b4; var layer_b5; var layer_b6; var layer_b7;
var layer_b; var layer_w; var layer_i; var layer_t;
var ctx_b1; var ctx_b2; var ctx_b3;
var ctx_b_b; var ctx_b_w; var ctx_b_i; var ctx_b_t;
var x = 800; var y = 100; var dx = 2; var dy = 4;
var b_x = 800; var b_y = 100; var b_dx = 2; var b_dy = 4;
var w_x = 800; var w_y = 100; var w_dx = 2; var w_dy = 4;
var i_x = 800; var i_y = 100; var i_dx = 2; var i_dy = 4;
var t_x = 800; var t_y = 100; var t_dx = 2; var t_dy = 4;
var WIDTH = 800;
var HEIGHT = 100;
var city = new Image();
var city_b = new Image();
var city_w = new Image();
var img_b = new Image();
var img_w = new Image();
var gif = new Image();
var img = new Image();
var txt = new Image();
img_new = new Image();
img_mask = new Image();
img_mask_w = new Image();
img_mask_b = new Image();
img_mask_ko = new Image();
img_mask_kow = new Image();
img_mask_kob = new Image();
img_mask_koeye = new Image();
img_mask_koeyew = new Image();
img_mask_koeyeb = new Image();
myimg="";
myimg="/imgs/btn/koeye_handhi.gif";
myimg="/imgs/btn/koeye_handhither.gif";
balls_n_cubes_b( myimg );
function showfilltext_b() {
ctx_b_t.fillStyle = '#f00';
ctx_b_t.fillStyle = 'yellow';
// ctx_b_t.font = 'italic bold 30px sans-serif';
ctx_b_t.font = 'italic bold 40px yokkmokkOT';
ctx_b_t.textBaseline = 'bottom';
ctx_b_t.fillText('timejaks: jkwii is here', 50, 100);
}
function showstroketext_b() {
ctx_b_t.strokeStyle = "#003300";
ctx_b_t.font = '40px san-serif';
ctx_b_t.textBaseline = 'bottom';
ctx_b_t.strokeText('timejaks jkwii is us', 300, 100);
}
// textBaseline top,hanging,middle,alphabetic,ideographic,bottom default: alphabetic
function cleartext_b() {
ctx_b_t.textBaseline = "top";
ctx_b_t.fillText('Top', 5, 100);
ctx_b_t.textBaseline = "bottom";
ctx_b_t.fillText('Bottom', 80, 100);
ctx_b_t.textBaseline = "middle";
ctx_b_t.fillText('Middle', 200, 100);
ctx_b_t.textBaseline = "alphabetic";
ctx_b_t.fillText('Alphabetic', 300, 100);
ctx_b_t.textBaseline = "hanging";
ctx_b_t.fillText('Hanging', 400, 100);
ctx_b_t.clearRect(1, 1, 600, 300);
}
var dragon = new Image();
function draw_dragon_b() {
ctx_b_i.drawImage(dragon, 100, 5);
}
function draw_smaller_dragon_b() {
ctx_b_i.drawImage(dragon, 10, 5, 58, 100);
}
function draw_dragon_head_b() {
ctx_b_i.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
}
function clearimage_b() {
ctx_b_i.clearRect(1, 1, 600, 300);
}
function balls_n_cubes_b(myimg) {
imgs_new = new Array(); z=0;
imgs_new[z++] = "/imgs/btn/koeye_handhi.gif";
imgs_new[z++] = "/imgs/btn/ko.png";
imgs_new[z++] = "/imgs/btn/ok.png";
imgs_new[z++] = "/imgs/btn/koeyew.png";
imgs_new[z++] = "/imgs/btn/koeyeb.png";
imgs_new[z++] = "/imgs/btn/koeye.png";
imgs_new[z++] = "/imgs/btn/koeye_handhither.gif";
if( myimg == "" ) {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = "/imgs/btn/koeye_handhi.gif";
}
else {
img_new.src = "/imgs/btn/koeye_handhither.gif";
img_new.src = myimg;
}
return( img_new );
}
function init_balls_n_cubes_b(myimg) {
// alert( "BUGS_5810 balls_n_cubes myimg="+myimg );
interval_b=50;
city.src ="/imgs/btn/koeye.png";
city_b.src ="/imgs/btn/koeyeb.png";
city_w.src ="/imgs/btn/koeyew.png";
img.src ="/imgs/btn/kob.png";
txt.src ="/imgs/btn/kow.png";
img_b.src ="/imgs/btn/koeyeb.png";
img_w.src ="/imgs/btn/koeyew.png";
img_mask.src ="/imgs/btn/kob.png";
img_mask_w.src ="/imgs/btn/kob.png";
img_mask_b.src ="/imgs/btn/kob.png";
img_mask_koeye.src = "/imgs/btn/koeye_mask.png";
img_mask_koeyew.src = "/imgs/btn/koeyew_mask.png";
img_mask_koeyeb.src = "/imgs/btn/koeyeb_mask.png";
img_mask_ko.src = "/imgs/btn/ko_mask.png";
img_mask_kow.src = "/imgs/btn/kow_mask.png";
img_mask_kob.src = "/imgs/btn/kob_mask.png";
gif.src = "/imgs/btn/koeye_handhither.gif";
gif.src = img_new.src;
layer_b1 = document.getElementById("layer_b1");
layer_b2 = document.getElementById("layer_b2");
layer_b3 = document.getElementById("layer_b3");
layer_b4 = document.getElementById("layer_b4");
layer_b5 = document.getElementById("layer_b5");
layer_b6 = document.getElementById("layer_b6");
layer_b7 = document.getElementById("layer_b7");
ctx_b1 = layer_b1.getContext("2d");
ctx_b2 = layer_b2.getContext("2d");
ctx_b3 = layer_b3.getContext("2d");
ctx_b_b = layer_b4.getContext("2d");
ctx_b_w = layer_b5.getContext("2d");
ctx_b_i = layer_b6.getContext("2d");
ctx_b_t = layer_b7.getContext("2d");
setInterval(drawall_b, interval_b);
}
function draw_b1() {
ctx_b1.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b1.fillStyle = "#FAF7F8";
ctx_b1.fillStyle = "darkslaegrey";
ctx_b1.beginPath();
ctx_b1.rect(0,0,WIDTH,HEIGHT);
ctx_b1.closePath();
ctx_b1.fill();
ctx_b1.fillStyle = "#444444";
ctx_b1.beginPath();
ctx_b1.arc(x, y, 10, 0, Math.PI*2, true);
ctx_b1.closePath();
ctx_b1.fill();
if (x + dx > WIDTH || x + dx < 0) dx = -dx;
if (y + dy > HEIGHT || y + dy < 0) dy = -dy;
x += dx;
y += dy;
}
function draw_bb() {
ctx_b_b.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b_b.fillStyle = "#FAF7F8";
ctx_b_b.fillStyle = "darkslaegrey";
ctx_b_b.beginPath();
ctx_b_b.rect(0,0,WIDTH,HEIGHT);
ctx_b_b.closePath();
ctx_b_b.fill();
ctx_b_b.fillStyle = "red";
ctx_b_b.beginPath();
ctx_b_b.arc(b_x, b_y, 10, 0, Math.PI*2, true);
ctx_b_b.closePath();
ctx_b_b.fill();
if (b_x + b_dx > WIDTH || b_x + b_dx < 0) b_dx = -b_dx;
if (b_y + b_dy > HEIGHT || b_y + b_dy < 0) b_dy = -b_dy;
b_x += b_dx;
b_y += b_dy;
}
function draw_bw() {
ctx_b_w.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b_w.fillStyle = "darkslaegrey";
ctx_b_w.beginPath();
ctx_b_w.rect(0,0,WIDTH,HEIGHT);
ctx_b_w.closePath();
ctx_b_w.fill();
ctx_b_w.fillStyle = "#444444";
ctx_b_w.fillStyle = "yellow";
ctx_b_w.fillStyle = "darkslategrey";
ctx_b_w.beginPath();
ctx_b_w.arc(w_x, w_y, 10, 0, Math.PI*2, true);
ctx_b_w.closePath();
ctx_b_w.fill();
if (w_x + w_dx > WIDTH || w_x + w_dx < 0) w_dx = -w_dx;
if (w_y + w_dy > HEIGHT || w_y + w_dy < 0) w_dy = -w_dy;
w_x += w_dx; w_y += w_dy;
}
function draw_b2() {
ctx_b2.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b2.drawImage(city, WIDTH/2-100, 10 );
ctx_b2.drawImage(city_w, WIDTH/2-100, 10 );
ctx_b2.drawImage(city_b, WIDTH/2-100, 10 );
ctx_b2.drawImage(gif, WIDTH/2-100, 10 );
}
function draw_bi() {
ctx_b_i.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b_i.drawImage(img, WIDTH/2-100, 10 );
}
function draw_bt() {
txt="timejaks: jkwii";
ctx_b_t.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b_t.fillStyle = 'black';
ctx_b_t.fillStyle = 'goldenrod';
ctx_b_t.fillStyle = 'darkslategrey';
ctx_b_t.font = '50px yokkmokkOT';
ctx_b_t.textBaseline = 'bottom';
ctx_b_t.fillText("timejaks: jkwii is where", x, y);
// alert( "BUGS_5900 drat_t txt="+txt );
}
function draw_b3() {
ctx_b3.clearRect(0, 0, WIDTH, HEIGHT);
ctx_b3.fillStyle = "#444444";
ctx_b3.save();
ctx_b3.translate(400,50);
ctx_b3.rotate(x/20);
ctx_b3.fillRect(10, 0, 25, 25);
ctx_b3.restore();
}
function drawall_b() {
draw_bb();
draw_bw();
draw_bi();
draw_bt();
draw_b1();
draw_b2();
draw_b3();
}
init_balls_n_cubes_b(myimg);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer