Web page background fireworks special effect js code

Fireworks on a webpage Js code , copy the code to the js file, and call the js file in the web page to realize the special effect of setting off fireworks in the web page background. If you don't want to display the background, modify the js code css code.

 function yanhuacanvas(){ document.write('<canvas id="yanhua" style="cursor:crosshair;display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:#000"></canvas>'); window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60)}})(); var canvas = document.getElementById('yanhua'),ctx = canvas.getContext('2d'),cw = window.innerWidth,ch = window.innerHeight,fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;canvas.width = cw;canvas.height = ch;function random(min,max){return Math.random()*(max-min)+min}; function calculateDistance(p1x,p1y,p2x,p2y){var xDistance=p1x-p2x,yDistance=p1y-p2y;return Math.sqrt(Math.pow(xDistance,2)+Math.pow(yDistance,2))}; function Firework(sx,sy,tx,ty){this.x=sx; this.y=sy;this.sx=sx;this.sy=sy;this.tx=tx;this.ty=ty;this.distanceToTarget=calculateDistance(sx,sy,tx,ty);this.distanceTraveled=0;this.coordinates=[]; this.coordinateCount=3;while(this.coordinateCount--){this.coordinates.push([this.x,this.y])}this.angle=Math.atan2(ty-sy,tx-sx);this.speed=2;this.acceleration=1.05;this.brightness=random(50,70); this.targetRadius=1};Firework.prototype.update=function(index){this.coordinates.pop();this.coordinates.unshift([this.x,this.y]);if(this.targetRadius<8){this.targetRadius+=0.3}else{this.targetRadius=1}this.speed*=this.acceleration; var vx=Math.cos(this.angle)*this.speed,vy=Math.sin(this.angle)*this.speed; this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);if(this.distanceTraveled>=this.distanceToTarget){createParticles(this.tx,this.ty);fireworks.splice(index,1)}else{this.x+=vx;this.y+=vy}};Firework.prototype.draw=function(){ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length-1][0], this.coordinates[this.coordinates.length-1][1]); ctx.lineTo(this.x,this.y);ctx.strokeStyle='hsl('+hue+', 100%, '+this.brightness+'%)'; ctx.stroke(); ctx.beginPath(); ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2);ctx.stroke()}; function Particle(x,y){this.x=x; this.y=y;this.coordinates=[]; this.coordinateCount=5;while(this.coordinateCount--){this.coordinates.push([this.x,this.y])}this.angle=random(0,Math.PI*2);this.speed=random(1,10); this.friction=0.95;this.gravity=1;this.hue=random(hue-20,hue+20);this.brightness=random(50,80); this.alpha=1;this.decay=random(0.015,0.03)}; Particle.prototype.update=function(index){this.coordinates.pop();this.coordinates.unshift([this.x,this.y]);this.speed*=this.friction;this.x+=Math.cos(this.angle)*this.speed; this.y+=Math.sin(this.angle)*this.speed+this.gravity; this.alpha-=this.decay;if(this.alpha<=this.decay){particles.splice(index,1)}}; Particle.prototype.draw=function(){ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]); ctx.lineTo(this.x,this.y);ctx.strokeStyle='hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')'; ctx.stroke()}; function createParticles(x,y){var particleCount=30; while(particleCount--){particles.push(new Particle(x,y))}};function loop(){requestAnimFrame(loop);hue+=0.5;ctx.globalCompositeOperation='destination-out';ctx.fillStyle='rgba(0, 0, 0, 0.5)'; Ctx. fillRect (0,0, cw, ch); ctx. globalCompositeOperation='lighter '; var text="Blueleaf wishes you happy new year ！ ";ctx.font="50px MicrosoftYahei";var textData=ctx.measureText(text); ctx.fillStyle="rgba("+parseInt(random(0,255))+","+parseInt(random(0,255))+","+parseInt(random(0,255))+",0.3)";ctx.fillText(text,cw/2-textData.width/2,ch/2);var i=fireworks.length;while(i--){fireworks[i].draw();fireworks[i].update(i)}var i=particles.length; while(i--){particles[i].draw();particles[i].update(i)}if(timerTick>=timerTotal){if(!mousedown){for(var h=0;h<50;h++){fireworks.push(new Firework(cw/2,ch/2,random(0,cw),random(0,ch)))}timerTick=0}}else{timerTick++}if(limiterTick>=limiterTotal){if(mousedown){fireworks.push(new Firework(cw/2,ch/2,mx,my));limiterTick=0}}else{limiterTick++}}; canvas.addEventListener('mousemove',function(e){mx=e.pageX-canvas.offsetLeft;my=e.pageY-canvas.offsetTop});canvas.addEventListener('mousedown',function(e){e.preventDefault();mousedown=true});canvas.addEventListener('mouseup',function(e){e.preventDefault(); mousedown=false});window.onload=loop;} javascript :yanhuacanvas();