59 lines
1.0 KiB
HTML
59 lines
1.0 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>Vortex of 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 ani() {
|
||
|
|
var ctx=document.getElementById('canvas').getContext('2d')
|
||
|
|
c++
|
||
|
|
cd=Math.round((t-c)/d)
|
||
|
|
ctx.strokeStyle="rgb("+cd+","+cd+","+cd+")"
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.arc(x,y,rr,0,Math.PI*2,true)
|
||
|
|
ctx.stroke()
|
||
|
|
|
||
|
|
rr+=p
|
||
|
|
do {
|
||
|
|
nx=x+(Math.floor(Math.random()*11)-5)
|
||
|
|
ny=y+(Math.floor(Math.random()*11)-5)
|
||
|
|
} while (nx-rr<2 || nx+rr>637 || ny-rr<2 || ny+rr>397)
|
||
|
|
x=nx
|
||
|
|
y=ny
|
||
|
|
|
||
|
|
if (rr<r) setTimeout("ani()",40)
|
||
|
|
}
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
x=320
|
||
|
|
y=200
|
||
|
|
r=180
|
||
|
|
rr=0
|
||
|
|
p=.5
|
||
|
|
t=r/p
|
||
|
|
d=t/255
|
||
|
|
c=0
|
||
|
|
ani()
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload=load
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id='canvas' width='640' height='400'></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|