HTML5 Canvas实现烟花绽放特效
更新时间:2023-04-03 05:39:01 阅读： 评论：0
本文为大家带来了一款，免费而又安全环保的html5 canvas实现的放烟花特效。
效果如下：
代码如下：
xml/html code
复制内容到剪贴板
<!doctypehtml><html><head><title>canvas实现放烟花特效</title><metachart=“utf-8”><metahttp-equiv=“x-ua-compatible”content=“ie=edge”><metaname=“viewport”content=“width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,ur-scalable=no”><styletype=“text/css”>html,body{height:100%;margin:0;padding:0} ul,li{text-indent:0;text-decoration:none;margin:0;padding:0} img{border:0} body{background-color:#000;color:#999;font:100%/18pxhelvetica,arial,sans-rif} canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20} #headerimg{width:100%;height:20%;} #bgimg{width:100%;height:80%;} #header,#bg{position:fixed;left:0;right:0;z-index:10} #header{top:0} #bg{position:fixed;z-index:1;bottom:0} audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5} </style></head><body><divid=“bg”><imgid=“bgimg”src=“/d/file/titlepic/yuzhou_xingkong_yu_yueliang-006.jpg”></div><scriptsrc=“http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js”></script><script>$(function(){ varfireworks=function(){ varlf=this; //产生烟花随机数 varrand=function(rmi,rma)白鹿温泉{ //按位取反运算符 return~~((math.random()*(rma-rmi+1))+rmi); },hittest=function(x1,y1,w1,h1,x2,y2,w2,h2){ return!(x1+w1<x2||x2+w2<x1||y1+h1<y2||y2+h2<y1); }; //请求动画帧 window.requestanimframe=function(){ returnwindow.requestanimationframe ||window.webkitrequestanimationframe ||window.mozrequestanimationframe ||window.orequestanimationframe ||window.msrequestanimationframe ||function(callback){ window.ttimeout(callback,1000/60); } }(); lf.init=function(){ lf.canvas=document.createelement(‘canvas’); //canvas全屏 lflf.canvas.width=lf.cw=$(window).innerwidth(); lflf.canvas.height=lf.ch=$(window).innerheight(); lf.particles=[]; lf.partcount芭欧=150; lf.fireworks=[]; lflf.mx=lf.cw/2; lflf.my=lf.ch/2; lf.currenthue=30; lf.partspeed=5; lf.partspeedvariance=10; lf.partwind=50; lf.partfriction=5; lf.partgravity=1; lf.huemin=0; lf.huemax=360; lf.fworkspeed=4; lf.fworkaccel=10; lf.huevariance=30; lf.flickerdensity=25; lf.showshockwave=true; lf.showtarget=fal; lf.clearalpha=25; $(document.body).append(lf.canvas); lflf.ctx=lf.canvas.getcontext(‘2d’); lf.ctx.linecap=’round’; lf.ctx.linejoin=’round’; lf.linewidth=1; lf.bindevents(); lf.canvasloop(); lf.canvas.onlectstart=function(){ returnfal; }; }; //创建粒子 lf.createparticles=function(x,y,hue){ varcountdown=lf.partcount; while(countdown–){ varnewparticle={ x:x, y:y, coordlast:[ {x:x,y:y}, {x:x,y:y}, {x:x,y:y} ], angle:rand(0,360), speed:rand(((lf.partspeed–lf.partspeedvariance)<=0)?1:lf.partspeed–lf.partspeedvariance,(lf.partspeed+lf.partspeedvariance)), friction:1–lf.partfriction/100, gravity:lf.partgravity/2, hue:rand(hue-lf.huevariance,hue+lf.huevariance), brightness:rand(50,80), alpha:rand(40,100)/100, decay:rand(10,50)/1000, wind:(rand(0,lf.partwind)–(lf.partwind/2))/25, linewidth:lf.linewidth }; lf.particles.push(newparticle); } }; //更新粒子 lf.updateparticles=function(){ vari=lf.particles.length; while(i–){ varp=lf.particles[i]; varradians=p.angle*math.pi/180; varvx=math.cos(radians)*p.speed; varvy=math.sin(radians)*p.speed; p.speed*=p.friction; p.coordlast[2].x=p.coordlast[1].x; p.coordlast[2].y=p.coordlast[1].y; p.coordlast[1].x=p.coordlast[0].x; p.coordlast[1].y=p.coordlast[0].y; p.coordlast[0].x=p.x; p.coordlast[0].y=p.y; p.x+=vx; p.y+=vy; p.y+=p.gravity; p.angle+=p.wind; p.alpha–=p.decay; if(!hittest(0,0,lf.cw,lf.ch,p.x-p.radius,p.y-p.radius,p.radius*2,p.radius*2)||p.alpha<.05){ lf.particles.splice(i,1); } }; }; //绘制粒子 lf.drawparticles=function(){ vari=lf.particles.length; while(i–){ varp=lf.particles[i]; varcoordrand=(rand(1,3)-1); lf.ctx.beginpath(); lf.ctx.moveto(math.round(p.coordlast[coordrand].x),math.round(p.coordlast[coordrand].y)); lf.ctx.lineto(math.round(p.x),math.round(p.y)); lf.ctx.clopath(); lf.ctx.strokestyle=‘hsla(‘+p.hue+’,100%,‘+p.brightness+’%,‘+p.alpha+’)’; lf.ctx.stroke(); if(lf.flickerdensity>0){ varinverdensity=50–lf.flickerdensity; if(rand(0,inverdensity)===inverdensity){ lf.ctx.beginpath(); lf.ctx.arc(math.round(p.x),math.round(p.y),rand(p.linewidth,p.linewidth+3)/2,0,math.pi*2,fal) lf.ctx.clopath(); varrandrandalpha=rand(50,100)/100; lf.ctx.fillstyle=‘hsla(‘+p.hue+’,100%,‘+p.brightness+’%,‘+randalpha+’)’; lf.ctx.fill(); } } }; }; //创建烟花 lf.createfireworks=function(startx,starty,targetx,targety){ varnewfirew半遮面ork={ x:startx, y:starty, startx:startx, starty:starty, hitx:fal, hity:fal, coordlast:[ {x:startx,y:starty}, {x:startx,y:starty}, {x:startx,y:starty} ], targetx:targetx, targety:targety, speed:lf.fworkspeed, angle:math.atan2(targety–starty,targetx–startx), shockwaveangle:math.atan2(targety–starty,targetx–startx)+(90*(math.pi/180)), acceleration:lf.fworkaccel/100, hue:lf.currenthue, brightness:rand(50,80), alpha:rand(50,100)/100, linewidth:lf.linewidth }; lf.fireworks.push(newfirework); }; //更新烟花 lf.updatefireworks=function(){ vari=lf.fireworks.length; while(i–){ varf=lf.fireworks[i]; lf.ctx.linewidth=f.linewidth; vx=math.cos(f.angle)*f.speed, vy=math.sin(f.angle)*f.speed; f.speed*=1+f.acceleration; f.coordlast[2].x=f.coordlast[1].x; f.coordlast[2].y=f.coordlast[1].y; f.coordlast[1].x=f.coordlast[0].x; f.coordlast[1].y=f.coordlast[0].y; f.coordlast[0].x=f.x; f.coordlast[0].y=f.y; if(f.startx>=f.targetx){ if(f.x+vx<=f.targetx){ ff.x=f.targetx; f.hitx=true; }el{ f.x+=vx; } }el{ if(f.x+vx>=f.targetx){ ff.x=f.targetx; f.hitx=true; }el{ f.x+=vx; } } if(f.starty>=f.targety){ if(f.y+vy<=f.targety){ ff.y=f.targety; f.hity=true; }el{ f.y+=vy; } }el{ if(f.y+vy>=f.targety){ ff.y=f.targety; f.hity=true; }el{ f.y+=vy; } } if(f.hitx&&f.hity){ lf.createparticles(f.targetx,f.targety,f.hue); lf.fireworks.splice(i,1); } }; }; //绘制烟花 lf.drawfireworks=function(){ vari=lf.fireworks.length; lf.ctx.globalcompositeoperation=‘lighter’; while(i–){ varf=lf.fireworks[i]; lf.ctx.linewidth=f.linewidth; varcoordrand=(rand(1,3)-1); lf.ctx.beginpath(); lf.ctx.moveto(math.round(f.coordlast[coordrand].x),math.round(f.coordlast[coordrand].y)); lf.ctx.lineto(math.round(f.x),math.round(f.y)); lf.ctx.clopath(); lf.ctx.strokestyle=‘hsla(‘+f.hue+’,100%,‘+f.brightness+’%,‘+f.alpha+’)’; lf.ctx.stroke(); if(lf.showtarget){ lf.ctx.save(); lf.ctx.beginpath(); lf.ctx.arc(math.round(f.targetx),math.round(f.targety),rand(1,8),0,math.pi*2,fal) lf.ctx.clopath(); lf.ctx.linewidth=1; lf.ctx.stroke(); lf.ctx.restore(); } if(lf.showshockwave){ lf.ctx.save(); lf.ctx.translate(math.round(f.x),math.round(f.y)); lf.ctx.rotate(f.shockwaveangle); lf.ctx.beginpath(); lf.ctx.arc(0,0,1*(f.speed/5),0,math.pi,true); lf.ctx.strokestyle=‘hsla(‘+f.hue+’,100%,‘+f.brightness+’%,Rdtf16;+rand(25,60)/100+’)’; lf.ctx.linewidth=f.linewidth; lf.ctx.stroke(); lf.ctx.restore(); } }; }; //绑定事件 lf.bindevents=function(){ $(window).on(‘resize’,function(){ cleartimeout(lf.timeout); lf.timeout=ttimeout(function(){ lflf.canvas.width=lf.cw=$(window).innerwidth(); lflf.canvas.height=lf.ch=$(window).innerheight(); lf.ctx.linecap=’round’; lf.ctx.linejoin=’round’; },100); }); $(lf.canvas).on(‘moudown’,function(e){ lf.mx=e.pagex–lf.canvas.offtleft; lf.my=e.pagey–lf.canvas.offttop; lf.currenthue=rand(lf.huemin,lf.huemax); lf.createfireworks(lf.cw/2,lf.ch,lf.mx,lf.my); $(lf.canvas).on(‘moumove.fireworks’,function(e){ lf.mx=e.pagex–lf.canvas.offtleft; lf.my=e.pagey–lf.canvas.offttop; lf.currenthue=rand(lf.huemin,lf.huemax); lf.createfireworks(lf.cw/2,lf.ch,lf.mx,lf.my); }); }); $(lf.canvas).on(‘mouup’,function(e){ $(lf.canvas).off(‘moumove.fireworks’); }); }; lf.clear=function(){ lf.particles=[]; lf.fireworks=[]; lf.ctx.clearrect(0,0,lf.cw,lf.ch); }; lf.canvasloop=function(){ requestanimframe(lf.canvasloop,lf.canvas); lf.ctx.globalcompositeoperation=̵小姨的秘密6;destination-out’; lf.ctx.fillstyle=‘rgba(0,0,0,’+lf.clearalpha/100+’)’; lf.ctx.fillrect(0,0,lf.cw,lf.ch); lf.updatefireworks(); lf.updateparticles(); lf.drawfireworks(); lf.drawparticles(); }; lf.init(); } varfworks=newfireworks(); $(‘#info-toggle’).on(‘click’,function(e){ $(‘#info-inner’).stop(fal,true).slidetoggle(100); e.preventdefault(); }); }); </script><canvaswidth=“1400”height=“449”></canvas></body></html>是不是被html5强大的效果惊呆了，一饱眼福了吧。
本文word下载地址：HTML5 Canvas实现烟花绽放特效.doc
本文 PDF 下载地址：HTML5 Canvas实现烟花绽放特效.pdf
