98 lines
2.3 KiB
HTML
98 lines
2.3 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>Polygons</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 drawpoly(x,y,angles,radius,rotate) {
|
||
|
|
var x,y,angles,radius,rotate,angdif,cang,cx,xy,i
|
||
|
|
if (!x) x=320
|
||
|
|
if (!y) y=200
|
||
|
|
if (!angles) angles=5
|
||
|
|
if (!radius) radius=50
|
||
|
|
if (!rotate) rotate=0
|
||
|
|
angdif=360/angles
|
||
|
|
cang=90-rotate
|
||
|
|
cx=Math.cos(cang*Math.PI/180)*radius
|
||
|
|
cy=-Math.sin(cang*Math.PI/180)*radius
|
||
|
|
for (i=1;i<angles+1;i++) {
|
||
|
|
cang=i*angdif+90-rotate
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.moveTo(x+cx,y+cy)
|
||
|
|
cx=Math.cos(cang*Math.PI/180)*radius
|
||
|
|
cy=-Math.sin(cang*Math.PI/180)*radius
|
||
|
|
ctx.lineTo(x+cx,y+cy)
|
||
|
|
ctx.stroke()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function dps() {
|
||
|
|
ctx.clearRect(0,0,640,400)
|
||
|
|
for (var i=0;i<num;i++) {
|
||
|
|
drawpoly(gx[i],gy[i],gang[i],grad[i],grot[i])
|
||
|
|
grad[i]+=mrad[i]*Math.floor(Math.random()*3)
|
||
|
|
if (grad[i]<10) mrad[i]=1
|
||
|
|
else if (grad[i]>100) mrad[i]=-1
|
||
|
|
|
||
|
|
grot[i]+=mrot[i]*Math.floor(Math.random()*3)
|
||
|
|
if (grot[i]<0) mrot[i]=1
|
||
|
|
else if (grot[i]>360) mrot[i]=-1
|
||
|
|
|
||
|
|
gx[i]+=mdirx[i]*(Math.floor(Math.random()*5)+1)
|
||
|
|
gy[i]+=mdiry[i]*(Math.floor(Math.random()*5)+1)
|
||
|
|
if (gx[i]<grad[i]+5) mdirx[i]=1
|
||
|
|
else if (gx[i]>640-grad[i]-5) mdirx[i]=-1
|
||
|
|
if (gy[i]<grad[i]+5) mdiry[i]=1
|
||
|
|
else if (gy[i]>400-grad[i]-5) mdiry[i]=-1
|
||
|
|
}
|
||
|
|
setTimeout("dps()",40)
|
||
|
|
}
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
ctx=document.getElementById('canvas').getContext('2d')
|
||
|
|
gang=new Array()
|
||
|
|
grad=new Array()
|
||
|
|
grot=new Array()
|
||
|
|
gx=new Array()
|
||
|
|
gy=new Array()
|
||
|
|
mdirx=new Array()
|
||
|
|
mdiry=new Array()
|
||
|
|
mrad=new Array()
|
||
|
|
mrot=new Array()
|
||
|
|
num=10
|
||
|
|
for (var i=0;i<num;i++) {
|
||
|
|
gang[i]=Math.floor(Math.random()*8)+3
|
||
|
|
grad[i]=Math.floor(Math.random()*26)+25
|
||
|
|
grot[i]=Math.floor(Math.random()*360)
|
||
|
|
gx[i]=Math.floor(Math.random()*(640-grad[i]*2))+grad[i]
|
||
|
|
gy[i]=Math.floor(Math.random()*(400-grad[i]*2))+grad[i]
|
||
|
|
|
||
|
|
mdirx[i]=Math.floor(Math.random()*2)*2-1
|
||
|
|
mdiry[i]=Math.floor(Math.random()*2)*2-1
|
||
|
|
mrad[i]=Math.floor(Math.random()*2)*2-1
|
||
|
|
mrot[i]=Math.floor(Math.random()*2)*2-1
|
||
|
|
}
|
||
|
|
dps()
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload=load
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id='canvas' width='640' height='400'></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|