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

66 lines
1.3 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>Random 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');
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<25) nc=25
else if (nc>75) nc=75
c[i]=nc
nb=b[i]+Math.floor(Math.random()*3)-1
if (nb<c[i]) nb=c[i]
else if (nb>400-c[i]) nb=400-c[i]
b[i]=nb
na=a[i]+Math.floor(Math.random()*3)-1
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() {
a=new Array()
b=new Array()
c=new Array()
num=10
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()
}
window.onload=load
</script>
</head>
<body>
<canvas id='canvas' width='640' height='400'></canvas>
</body>
</html>