Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve cool fireworks special effects in JS". In daily operation, I believe many people have doubts about how to achieve cool fireworks special effects in JS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to achieve cool fireworks special effects in JS". Next, please follow the editor to study!

Source code:

JS achieves fireworks special effects-W3C technical headlines body {margin: 0; padding: 0; background: url (". / images/background-image.png") no-repeat center center fixed; / * compatible browser version * /-webkit-background-size: cover;-o-background-size: cover Background-size: cover;} / / window.requestAnimationFrame () this API is the js global method provided by the browser for animation effects. Window.requestAnimationFrame= (function () {return window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | function (callback) {window.setTimeout (callback,1000) / / perform animation}} every 10 seconds) () / / get the canvas region. And set width and height var area=document.getElementById ("mycanvas"); area.width=document.documentElement.clientWidth; area.height=document.documentElement.clientHeight; / / convert to 2d model var ctx=area.getContext ("2d"); / / fireworks array hue=120;// sets color range timerTick = 0 / timer timerTotal=5;// fireworks bloom every 5 seconds fireworks= []; / store fireworks array particles= [] / / Storage debris array / / value between random min and max function random (min,max) {return Math.random () * (max-min) + min;} / / calculate the distance between two points function distans (sx,sy,tx,ty) {var xdistan=sx-tx; var ydistan=sy-ty; return Math.sqrt ((Math.pow (xdistan,2) + Math.pow (ydistan,2) } / / define fireworks object function Firework (sx,sy,tx,ty) {this.x=sx; this.y=sy; this.sx=sx; this.sy=sy; this.tx=tx; this.ty=ty; / / calculate the distance between two points this.targetDistances=distans (sx,sy,tx,ty); / / run distance this.distancesc=0 / / define the motion trajectory generated by the variable this.guiji= []; this.guijicount=3; while (this.guijicount--) {this.guiji.push ([this.x,this.y]);} / / calculate the angle this.angle=Math.atan2 (ty-sy,tx-sx); this.speed=2; this.jiasudu=1.05 This.brightness=random (50 this.guiji.pop 70); / / brightness of fireworks this.targetRad=5;// Radius of fireworks circles} / / Update the position of fireworks Firework.prototype.update=function (index) {this.guiji.pop (); this.guiji.push ([this.x,this.y]) / / Target circle movement if (this.targetRad=this.targetDistances) {/ / generate fireworks debris createparticals (this.tx,this.ty); / / destroy fireworks small circles fireworks.splice (index,1)} else {this.x+=vx; this.y+=vy }} / / start to draw the track Firework.prototype.draw=function () {ctx.beginPath (); / / the starting point of the track ctx.moveTo (this.Guiji.length-1] [0], this.Guiji.length-1] [1]; / / draw a line to the target point ctx.lineTo (this.x,this.y) / / draw fireworks of different colors ctx.strokeStyle='hsl ('+ hue+',100%,'+this.brightness+'%)'; ctx.stroke (); / draw fireworks tracks / / draw target circles ctx.beginPath (); ctx.arc (this.tx,this.ty,this.targetRad,0,Math.PI*2); ctx.stroke () } / / define fireworks debris method function Particle (x, y) {this.x = x; this.y = y; this.guiji = []; this.guijicount = 10; while (this.guijicount--) {this.guiji.push ([this.x,this.y]) } / / generate detritus this.angle=random (0, 2*Math.PI) in any direction; this.speed=random (1Magne10); / / Random velocity this.mocal=0.95;// friction force this.gravity=0.98;// gravity this.hue=random (hue-20,hue+20); / / debris color variation range this.brightness=random (50Power80); this.alpha=1 / / define the initial opacity of the detritus this.decay=random (0.015 ~ 0.03); / / time the detritus disappears} / / update the detritus Particle.prototype.update=function (index) {this.guiji.pop (); / / the unshift () method adds one or more elements to the beginning of the array and returns a new length. This.guiji.unshift ([this.x,this.y]); / / below is the movement of fireworks debris this.speed*=this.mocal; this.x+=Math.cos (this.angle) * this.speed; this.y+=Math.sin (this.angle) * this.speed+this.gravity; this.alpha-=this.decay;// opacity has changed to 0 over time. That is, fireworks debris disappears if (this.alpha=timerTotal) {fireworks.push (new Firework (clientw/2,clienth,random (0recorder clientw), random (0jre clienenth)); timerTick=0;} else {timerTick++;} window. "nl" ad=loop ()

If there is no dark background image, you can directly set the background color to black.

Background-color: black; at this point, the study on "how to achieve cool fireworks special effects in JS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.