<!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="1500px" height="900px" style="border:1px solid black;background:black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=canvas.width;
var height=canvas.height;
function Qiu(ctx,x,y){
this.ctx=ctx;
this.x=x;
this.y=y;
this.speedX=Math.random()*4-2;
this.speedY=-1;
this.zhongli=0.1;
this.banjing=5;
this.color=createColor()
this.draw()
}
Qiu.prototype.draw=function(){
this.ctx.beginPath();
this.ctx.fillStyle=this.color;
this.ctx.arc(this.x,this.y,this.banjing,0,2*Math.PI,false);
this.ctx.fill();
}
Qiu.prototype.update=function(){
this.x+=this.speedX;
this.speedY+=this.zhongli;
this.y+=this.speedY
this.banjing-=0.03;
if(this.banjing<1){
this.banjing=1
}
this.draw()
}
var arr=[]
var img =new Image()
img.src="./4.png"
img.onload = function () {
setInterval(() => {
ctx.clearRect(0,0,width,height)
ctx.drawImage(img,500,130,300,500);
var qiu= new Qiu(ctx,width*Math.random(),0);
var qiu1= new Qiu(ctx,width*Math.random(),0);
for(var i=0;i<arr.length;i++){
arr[i].update()
}
arr.push(qiu);
arr.push(qiu1);
if(arr.length>300){
arr.shift()
}
//console.log(arr.length)
}, 15);
};
function createColor(){
return "white";
return "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
}
</script>
</body >
</html>