一、实现效果
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<canvas id="can" width="100%" height="1000"></canvas>
<!-- <div id="box" style="left: 0;"></div> -->
<script>
var can=document.getElementById("can");
var c=can.getContext("2d");
var w=can.width=window.innerWidth;
var h=can.Height=window.innerHeight;
c.beginPath();
c.fillStyle = "red";
c.fillRect(0,0,w,h);
c.closePath();
window.onresize=function(){
w=can.width=window.innerWidth;
h=can.Height=window.innerHeight;
c.beginPath();
c.fillStyle="black";
c.fillRect(0,0,w,h);
c.closePath();
}
function Fireworks(){}
Fireworks.prototype={
init:function(){
this.x=ranNum(0.2*w,w);
this.xs=ranNum(0,4);
this.y=0;
this.ys=ranNum(5,10);
this.l=ranNum(0.8*h,0.9*h);
this.r=1;
this.rs=2;
this.a=1;
this.as=0.02;
this.color="#fff";
},
draw:function(){
if(this.y>this.l){
c.fillStyle=this.color;
c.fillRect(this.x,this.y,4,15);
}else{
c.beginPath();
c.arc(this.x,this.y,this.r,0,Math.PI*2,true);
c.strokeStyle="#fff";
c.stroke();
c.closePath();
}
this.update();
},
update:function(){
if(this.y<this.l){
this.y+=this.ys;
this.x-=this.xs;
}else{
if(this.r<100){
this.r+=this.rs;
this.a*=this.as;
}else{
this.init();
}
}
}
}
var fire=[];
setTimeout(function(){
for(var i=0;i<30;i++){
var firework=new Fireworks;
firework.init();
fire.push(firework);
}
},5000);
function move(){
c.beginPath();
c.fillStyle="rgba(0,0,0,0.1)";
c.fillRect(0,0,w,h);
c.beginPath();
c.closePath();
for(var i=0;i<fire.length;i++){
fire[i].draw();
}
requestAnimationFrame(move);
}
move();
function ranNum(min,max){
return Math.random()*(max-min)+min;
}
function Circle(){
}
</script>
</body>
</html>