<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<canvas id="canvas" width="1400px" height="650px" style="background: black;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var width=canvas.width;
var height=canvas.height;
var ctx=canvas.getContext("2d");
function Yuan(ctx,x,y){
this.ctx=ctx;
this.x=x;
this.y=y;
this.speedX=Math.random()*8-4;
this.speedY=Math.random()*8-4;
this.jiaSu=0.0001;
this.color="white";
this.banjing=.1;
}
Yuan.prototype.draw=function(){
this.ctx.beginPath();
if(this.speedX<0){
this.speedX-=this.jiaSu;
}else{
this.speedX+=this.jiaSu;
}
if(this.speedY<0){
this.speedY-=this.jiaSu;
}else{
this.speedY+=this.jiaSu;
}
this.banjing+=0.01;
this.x+=this.speedX;
this.y+=this.speedY;
this.ctx.fillStyle=this.color;
this.ctx.arc(this.x,this.y,this.banjing,0,2*Math.PI);
this.ctx.fill();
this.ctx.closePath();
}
var arr=[]
setInterval(function(){
ctx.clearRect(0,0,width,height);
var yuan= new Yuan(ctx,width/2,height/2);
arr.push(yuan);
arr.forEach(function(item){
item.draw();
})
if(arr.length>500){
arr.shift();
}
console.log(arr.length);
},16)
function createColor(){
return "rgb("+Math.random()*200+","+Math.random()*200+","+Math.random()*200+")";
}
</script>
</body>
</html>