<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" ></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext('2d');
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
function randFN(min,max){
return Math.floor( Math.random()*(max-min) +min);
}
function Ball(){
this.r = randFN(20,50);
this.x = randFN(60,myCanvas.width-60);
this.y = randFN(60,myCanvas.height-60);
this.color = 'rgba('+ randFN(0,256)+','+ randFN(0,256)+','+ randFN(0,256)+','+ Math.random().toFixed(1) +')' ;
this.speedX = randFN(-4,4);
this.speedY = randFN(-4,4);
}
Ball.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
Ball.prototype.run = function(){
if(this.x +this.r > myCanvas.width || this.x - this.r < 0){
this.speedX *= -1;
}
if(this.y +this.r > myCanvas.height || this.y - this.r < 0){
this.speedY *= -1;
}
this.x += this.speedX;
this.y += this.speedY;
}
var arrAllBall = [];
for (var i = 0; i < 1000; i++) {
var ball = new Ball();
ball.draw();
arrAllBall.push(ball);
}
// setInterval(function(){
// ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
// for (var i = 0; i < arrAllBall.length; i++) {
// arrAllBall[i].run();
// arrAllBall[i].draw();
// }
// },30);
function annimate(){
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
for (var i = 0; i < arrAllBall.length; i++) {
arrAllBall[i].run();
arrAllBall[i].draw();
}
requestAnimationFrame(annimate)
}
annimate();
</script>
</html>
