97 lines
1.9 KiB
HTML
97 lines
1.9 KiB
HTML
<!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>Cursor-following canvas circles</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 ani() {
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
|
|
ctx.clearRect(0,0,640,400);
|
|
|
|
for (var i=0;i<num;i++) {
|
|
ctx.beginPath();
|
|
ctx.arc(a[i],b[i],c[i],0,Math.PI*2,true);
|
|
ctx.stroke();
|
|
nc=c[i]+Math.floor(Math.random()*3)-1
|
|
if (nc<minr) nc=minr
|
|
else if (nc>maxr) nc=maxr
|
|
c[i]=nc
|
|
|
|
|
|
nb=Math.floor(Math.random()*(diff*2+1))-diff+y
|
|
if (nb<c[i]) nb=c[i]
|
|
else if (nb>400-c[i]) nb=400-c[i]
|
|
b[i]=nb
|
|
na=Math.floor(Math.random()*(diff*2+1))-diff+x
|
|
if (na<c[i]) na=c[i]
|
|
else if (na>640-c[i]) na=640-c[i]
|
|
a[i]=na
|
|
}
|
|
|
|
setTimeout("ani()",40)
|
|
}
|
|
|
|
function load() {
|
|
x=320
|
|
y=200
|
|
maxr=75
|
|
minr=25
|
|
diff=10
|
|
num=10
|
|
|
|
a=new Array()
|
|
b=new Array()
|
|
c=new Array()
|
|
for (var i=0;i<num;i++) {
|
|
c[i]=Math.floor(Math.random()*50)+25
|
|
b[i]=Math.floor(Math.random()*(400-c[i]*2))+c[i]
|
|
a[i]=Math.floor(Math.random()*(640-c[i]*2))+c[i]
|
|
}
|
|
|
|
ani()
|
|
}
|
|
|
|
function mc(e) {
|
|
getwh()
|
|
x=Math.floor(e.pageX-(w-642)/2-2)
|
|
y=Math.floor(e.pageY-(h-402)/2-2)
|
|
}
|
|
|
|
window.onload=load
|
|
document.onmousemove=mc
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id='canvas' width='640' height='400'></canvas>
|
|
</body>
|
|
</html> |