女儿说要看烟花，但是政府规定不能放，程序员爸爸默默的拿起了键盘，程序员就是要为所欲为！

更新时间:2023-04-07 17:33:29 阅读：评论：0

一不给政府填麻烦、二给自己省银子，三给女儿带来了开心、激动，一举三得，何乐而不为！

效果图：

完整代码(代码里面有详细注释就不另作说明了)：

<!DOCTYPE html><html><head lang="en"><meta chart="GBK"><title></title><style>body{    margin: 0;    padding: 0;    background-color: black;}</style></head><body><canvas id='canvas'></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');    canvas.width=document.documentElement.clientWidth;    canvas.height=document.documentElement.clientHeight;var ctx = canvas.getContext("2d");var arr=[];//存取烟花的数组var list=[];//存取碎片的数组//定义烟花function Fire(){this.x=canvas.width/2,//烟花的x坐标this.y=canvas.height,//烟花的y坐标this.radius=2,//烟花的半径this.speed=getRandom(8,12),//运行的速度this.angle=getRandom(1.1*Math.PI,1.9 * Math.PI),//发射的范围//this.color='white';//颜色this.color=Math.random()>0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCa());}Fire.prototype.draw=function(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);//画圆ctx.fillStyle=this.color;ctx.fill();ctx.cloPath();}//爆炸后重置烟花的位置、速度等参数，以便再次发射Fire.prototype.restore=function(){this.x=canvas.width/2;this.y=canvas.height;this.speed=getRandom(8,12);this.angle=getRandom(1.1*Math.PI,1.9 * Math.PI);}Fire.prototype.update=function(){//更新X坐标this.x+=Math.cos(this.angle)*this.speed;//更新Y坐标this.y+=Math.sin(this.angle)*this.speed;//控制飞行的最大位置if(this.y<canvas.height*0.2 || this.x<canvas.width*0.1 || this.x>canvas.width*0.9){//达到最大位置后buildChildFire(this);//生成烟花碎片this.restore();//将烟花重置}}//定义烟花碎片function ChildFire(){this.x=0,//烟花碎片x位置this.y=0,//烟花碎片y位置this.radius=1,//烟花碎片半径this.n=1,//烟花碎片次数this.speed=getRandom(1,10)/5,//烟花碎片速度this.g=0.98,//重力this.mocha=0.96,//摩擦力//this.color='#' + Math.random().toString(16).substr(2, 6).toUpperCa(),//一半是白色的碎片，一半是五颜六色的碎片this.color=Math.random()>0.5 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCa()),//碎片的角度this.angle=getRandom(0,2 * Math.PI);//0-2π之间随机，这样就各个方向都有了}//绘制碎片ChildFire.prototype.draw=function(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);ctx.fillStyle=this.col消防演习方案or;ctx.fill();ctx.cloPath();}ChildFire.prototype.update=function(index){//更新X坐标this.x+=Math.cos(this.angle)*this.speed*this.mocha;//更新Y坐标this.y+=Math.sin(this.angle)*this.speed*this.mocha*this.g;//执行一次加破格录取1this.n++;//50次后清除烟花碎片if(this.n>=50){//清除当前碎片的动画函数window.cancelAnimationFrame(this.raf);//清除当前烟花碎片，否则会导致卡死list.splice(index,1);}el{this.raf = window.requestAnimationFrame(this.dr党员支部大会aw);}}//创建烟花对象(这里默认2个，多了可能会卡)var fire = new Fire();arr.push(fire);var fire2 = new Fire();arr.push(fire2);//清洗画布function clear() {   ctx.fillStyle = 'rgba(0,0,0,0.3)';   ctx.fillRect(0,0,canvas.width,canvas.height);}//创建碎片function buildChildFire(fire){for(var i=0;i<400;i++){var cFire =new ChildFire();//定义烟花碎片的x、y轴位置cFire.x=fire.x;cFire.y=fire.y;list.push(cFire);}}functi十大名校排名on draw(){clear();//循环存烟花碎片数组list.forEach(function(c,i){c.draw();c.update(i);})//循环存烟花数组arr.forEach(function(c,i){c.draw();c.update();})win繁华人生dow.requestAnimationFrame(draw);}//获取一定范围内的随机数function getRandom(min, max) {  return Math.random() * (max - min) + min;}//执行动画函数window.requestAnimationFrame(draw)</script></body></html>