metanohi-misc-subsites/old-projects/canvas/cb.htm

78 lines
1.6 KiB
HTML
Raw Normal View History

2011-08-02 19:57:57 +02:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Circles in boxes</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
canvas {
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-320px;
border:1px solid #000;
}
</style>
<script type='text/javascript'>
function getwh() {
if (self.innerHeight) {
h=self.innerHeight
w=self.innerWidth
}
else if (document.documentElement && document.documentElement.clientHeight) {
h=document.documentElement.clientHeight
w=document.documentElement.clientHeight
}
else if (document.body) {
h=document.body.clientHeight
w=document.body.clientWidth
}
}
function mm(e) {
getwh()
x=Math.floor(e.pageX-(w-642)/2-2)
y=Math.floor(e.pageY-(h-402)/2-2)
if (x<0) x=0
if (x>639) x=639
if (y<0) y=0
if (y>399) y=399
x=(x-320)*(-1)+160
if (x>320) x=320
if (x<160) lx=160
else lx=x
if (x<0) x=0
if (x>160) rx=150
else rx=x*(-1)+310
lw=x-10
if (lw<150) lw=150
rw=310-x
if (rw<150) rw=150
lh=lw*390/310
rh=rw*390/310
var ctx=document.getElementById('canvas').getContext('2d')
ctx.lineWidth=2
ctx.clearRect(0,0,640,400)
ctx.strokeRect(320-lx+5,(390-lh)/2+5,lx-10,lh)
ctx.strokeRect(325,(390-rh)/2+5,rx,rh)
ctx.beginPath()
ctx.arc(lw/2-lx+325,lh/2+(390-lh)/2+5,lw/4,0,Math.PI*2,true)
ctx.stroke()
ctx.beginPath()
ctx.arc(rw/2+rw-rx+325,rh/2+(390-rh)/2+5,rw/4,0,Math.PI*2,true)
ctx.stroke()
}
document.onmousemove=mm
</script>
</head>
<body>
<canvas id='canvas' width='640' height='400'></canvas>
</body>
</html>