迅闻网
让更多人看到你

html代码烟花特效(html樱花飘落代码)

  html代码烟花特效

本文为我们带来了一款,免费而又安全环保的HTML5Canvas完成的放焰火特效。
作用如下:
代码如下:
XML/HTMLCode仿制内容到剪贴板
Canvas完成放焰火特效
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-serif}
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}
f2713d4c987a5c9ae28967d8dedcd6c6.png
$(function(){
varFireworks=function(){
varself=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.setTimeout(callback,1000/60);
}
}();
self.init=function(){
self.canvas=document.createElement(‘canvas’);
//canvas全屏
selfself.canvas.width=self.cw=$(window).innerWidth();
selfself.canvas.height=self.ch=$(window).innerHeight();
self.particles=[];
self.partCount=150;
self.fireworks=[];
selfself.mx=self.cw/2;
selfself.my=self.ch/2;
self.currentHue=30;
self.partSpeed=5;
self.partSpeedVariance=10;
self.partWind=50;
self.partFriction=5;
self.partGravity=1;
self.hueMin=0;
self.hueMax=360;
self.fworkSpeed=4;
self.fworkAccel=10;
self.hueVariance=30;
self.flickerDensity=25;
self.showShockwave=true;
self.showTarget=false;
self.clearAlpha=25;
$(document.body).append(self.canvas);
selfself.ctx=self.canvas.getContext(‘2d’);
self.ctx.lineCap=’round’;
self.ctx.lineJoin=’round’;
self.lineWidth=1;
self.bindEvents();
self.canvasLoop();
self.canvas.onselectstart=function(){
returnfalse;
};
};
//创立粒子
self.createParticles=function(x,y,hue){
varcountdown=self.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(((self.partSpeed-self.partSpeedVariance)<=0)?1:self.partSpeed-self.partSpeedVariance,(self.partSpeed+self.partSpeedVariance)),
friction:1-self.partFriction/100,
gravity:self.partGravity/2,
hue:rand(hue-self.hueVariance,hue+self.hueVariance),
brightness:rand(50,80),
alpha:rand(40,100)/100,
decay:rand(10,50)/1000,
wind:(rand(0,self.partWind)-(self.partWind/2))/25,
lineWidth:self.lineWidth
};
self.particles.push(newParticle);
}
};
//更新粒子
self.updateParticles=function(){
vari=self.particles.length;
while(i–){
varp=self.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,self.cw,self.ch,p.x-p.radius,p.y-p.radius,p.radius*2,p.radius*2)||p.alpha<.05){
self.particles.splice(i,1);
}
};
};
//制作粒子
self.drawParticles=function(){
vari=self.particles.length;
while(i–){
varp=self.particles[i];
varcoordRand=(rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(p.coordLast[coordRand].x),Math.round(p.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(p.x),Math.round(p.y));
self.ctx.closePath();
self.ctx.strokeStyle=’hsla(‘+p.hue+’,100%,’+p.brightness+’%,’+p.alpha+’)’;
self.ctx.stroke();
if(self.flickerDensity>0){
varinverseDensity=50-self.flickerDensity;
if(rand(0,inverseDensity)===inverseDensity){
self.ctx.beginPath();
self.ctx.arc(Math.round(p.x),Math.round(p.y),rand(p.lineWidth,p.lineWidth+3)/2,0,Math.PI*2,false)
self.ctx.closePath();
varrandrandAlpha=rand(50,100)/100;
self.ctx.fillStyle=’hsla(‘+p.hue+’,100%,’+p.brightness+’%,’+randAlpha+’)’;
self.ctx.fill();
}
}
};
};
//创立焰火
self.createFireworks=function(startX,startY,targetX,targetY){
varnewFirework={
x:startX,
y:startY,
startX:startX,
startY:startY,
hitX:false,
hitY:false,
coordLast:[
{x:startX,y:startY},
{x:startX,y:startY},
{x:startX,y:startY}
],
targetX:targetX,
targetY:targetY,
speed:self.fworkSpeed,
angle:Math.atan2(targetY-startY,targetX-startX),
shockwaveAngle:Math.atan2(targetY-startY,targetX-startX)+(90*(Math.PI/180)),
acceleration:self.fworkAccel/100,
hue:self.currentHue,
brightness:rand(50,80),
alpha:rand(50,100)/100,
lineWidth:self.lineWidth
};
self.fireworks.push(newFirework);
};
//更新焰火
self.updateFireworks=function(){
vari=self.fireworks.length;
while(i–){
varf=self.fireworks[i];
self.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;
}else{
f.x+=vx;
}
}else{
if(f.x+vx>=f.targetX){
ff.x=f.targetX;
f.hitX=true;
}else{
f.x+=vx;
}
}
if(f.startY>=f.targetY){
if(f.y+vy<=f.targetY){
ff.y=f.targetY;
f.hitY=true;
}else{
f.y+=vy;
}
}else{
if(f.y+vy>=f.targetY){
ff.y=f.targetY;
f.hitY=true;
}else{
f.y+=vy;
}
}
if(f.hitX&&f.hitY){
self.createParticles(f.targetX,f.targetY,f.hue);
self.fireworks.splice(i,1);
}
};
};
//制作焰火
self.drawFireworks=function(){
vari=self.fireworks.length;
self.ctx.globalCompositeOperation=’lighter’;
while(i–){
varf=self.fireworks[i];
self.ctx.lineWidth=f.lineWidth;
varcoordRand=(rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(f.coordLast[coordRand].x),Math.round(f.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(f.x),Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle=’hsla(‘+f.hue+’,100%,’+f.brightness+’%,’+f.alpha+’)’;
self.ctx.stroke();
if(self.showTarget){
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(f.targetX),Math.round(f.targetY),rand(1,8),0,Math.PI*2,false)
self.ctx.closePath();
self.ctx.lineWidth=1;
self.ctx.stroke();
self.ctx.restore();
}
if(self.showShockwave){
self.ctx.save();
self.ctx.translate(Math.round(f.x),Math.round(f.y));
self.ctx.rotate(f.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(0,0,1*(f.speed/5),0,Math.PI,true);
self.ctx.strokeStyle=’hsla(‘+f.hue+’,100%,’+f.brightness+’%,’+rand(25,60)/100+’)’;
self.ctx.lineWidth=f.lineWidth;
self.ctx.stroke();
self.ctx.restore();
}
};
};
//绑定事情
self.bindEvents=function(){
$(window).on(‘resize’,function(){
clearTimeout(self.timeout);
self.timeout=setTimeout(function(){
selfself.canvas.width=self.cw=$(window).innerWidth();
selfself.canvas.height=self.ch=$(window).innerHeight();
self.ctx.lineCap=’round’;
self.ctx.lineJoin=’round’;
},100);
});
$(self.canvas).on(‘mousedown’,function(e){
self.mx=e.pageX-self.canvas.offsetLeft;
self.my=e.pageY-self.canvas.offsetTop;
self.currentHue=rand(self.hueMin,self.hueMax);
self.createFireworks(self.cw/2,self.ch,self.mx,self.my);
$(self.canvas).on(‘mousemove.fireworks’,function(e){
self.mx=e.pageX-self.canvas.offsetLeft;
self.my=e.pageY-self.canvas.offsetTop;
self.currentHue=rand(self.hueMin,self.hueMax);
self.createFireworks(self.cw/2,self.ch,self.mx,self.my);
});
});
$(self.canvas).on(‘mouseup’,function(e){
$(self.canvas).off(‘mousemove.fireworks’);
});
};
self.clear=function(){
self.particles=[];
self.fireworks=[];
self.ctx.clearRect(0,0,self.cw,self.ch);
};
self.canvasLoop=function(){
requestAnimFrame(self.canvasLoop,self.canvas);
self.ctx.globalCompositeOperation=’destination-out’;
self.ctx.fillStyle=’rgba(0,0,0,’+self.clearAlpha/100+’)’;
self.ctx.fillRect(0,0,self.cw,self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();
self.drawParticles();
};
self.init();
}
varfworks=newFireworks();
$(‘#info-toggle’).on(‘click’,function(e){
$(‘#info-inner’).stop(false,true).slideToggle(100);
e.preventDefault();
});
});
是不是被HTML5强大的作用惊呆了,一饱眼福了吧。

html樱花飘落代码

<!DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.0Transitional//EN”>
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<METANAME=”Generator”CONTENT=”EditPlus”>
<METANAME=”Author”CONTENT=””>
<METANAME=”Keywords”CONTENT=””>
<METANAME=”Description”CONTENT=””>
<style>body{
padding:0;
margin:0;
overflow:hidden;
height:600px;
}
canvas{
padding:0;
margin:0;
}
div.btnbg{
position:fixed;
left:0;
top:0;
}</style>
</HEAD>
<BODY>
<canvasid=”sakura”></canvas>
<divclass=”btnbg”>
</div>
<!–sakurashader–>
<scriptid=”sakura_point_vsh”type=”x-shader/x_vertex”>
uniformmat4uProjection;
uniformmat4uModelview;
uniformvec3uResolution;
uniformvec3uOffset;
uniformvec3uDOF;//x:focusdistance,y:focusradius,z:maxradius
uniformvec3uFade;//x:startdistance,y:halfdistance,z:nearfadestart
attributevec3aPosition;
attributevec3aEuler;
attributevec2aMisc;//x:size,y:fade
varyingvec3pposition;
varyingfloatpsize;
varyingfloatpalpha;
varyingfloatpdist;
//varyingmat3rotMat;
varyingvec3normX;
varyingvec3normY;
varyingvec3normZ;
varyingvec3normal;
varyingfloatdiffuse;
varyingfloatspecular;
varyingfloatrstop;
varyingfloatdistancefade;
voidmain(void){
//Projectionisbasedonverticalangle
vec4pos=uModelview*vec4(aPosition+uOffset,1.0);
gl_Position=uProjection*pos;
gl_PointSize=aMisc.x*uProjection[1][1]/-pos.z*uResolution.y*0.5;
pposition=pos.xyz;
psize=aMisc.x;
pdist=length(pos.xyz);
palpha=smoothstep(0.0,1.0,(pdist-0.1)/uFade.z);
vec3elrsn=sin(aEuler);
vec3elrcs=cos(aEuler);
mat3rotx=mat3(
1.0,0.0,0.0,
0.0,elrcs.x,elrsn.x,
0.0,-elrsn.x,elrcs.x
);
mat3roty=mat3(
elrcs.y,0.0,-elrsn.y,
0.0,1.0,0.0,
elrsn.y,0.0,elrcs.y
);
mat3rotz=mat3(
elrcs.z,elrsn.z,0.0,
-elrsn.z,elrcs.z,0.0,
0.0,0.0,1.0
);
mat3rotmat=rotx*roty*rotz;
normal=rotmat[2];
mat3trrotm=mat3(
rotmat[0][0],rotmat[1][0],rotmat[2][0],
rotmat[0][1],rotmat[1][1],rotmat[2][1],
rotmat[0][2],rotmat[1][2],rotmat[2][2]
);
normX=trrotm[0];
normY=trrotm[1];
normZ=trrotm[2];
constvec3lit=vec3(0.6917144638660746,0.6917144638660746,-0.20751433915982237);
floattmpdfs=dot(lit,normal);
if(tmpdfs<0.0){
normal=-normal;
tmpdfs=dot(lit,normal);
}
diffuse=0.4+tmpdfs;
vec3eyev=normalize(-pos.xyz);
if(dot(eyev,normal)>0.0){
vec3hv=normalize(eyev+lit);
specular=pow(max(dot(hv,normal),0.0),20.0);
}
else{
specular=0.0;
}
rstop=clamp((abs(pdist-uDOF.x)-uDOF.y)/uDOF.z,0.0,1.0);
rstop=pow(rstop,0.5);
//-0.69315=ln(0.5)
distancefade=min(1.0,exp((uFade.x-pdist)*0.69315/uFade.y));
}
</script>
<scriptid=”sakura_point_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformvec3uDOF;//x:focusdistance,y:focusradius,z:maxradius
uniformvec3uFade;//x:startdistance,y:halfdistance,z:nearfadestart
constvec3fadeCol=vec3(0.08,0.03,0.06);
varyingvec3pposition;
varyingfloatpsize;
varyingfloatpalpha;
varyingfloatpdist;
//varyingmat3rotMat;
varyingvec3normX;
varyingvec3normY;
varyingvec3normZ;
varyingvec3normal;
varyingfloatdiffuse;
varyingfloatspecular;
varyingfloatrstop;
varyingfloatdistancefade;
floatellipse(vec2p,vec2o,vec2r){
vec2lp=(p-o)/r;
returnlength(lp)-1.0;
}
voidmain(void){
vec3p=vec3(gl_PointCoord-vec2(0.5,0.5),0.0)*2.0;
vec3d=vec3(0.0,0.0,-1.0);
floatnd=normZ.z;//dot(-normZ,d);
if(abs(nd)<0.0001)discard;
floatnp=dot(normZ,p);
vec3tp=p+d*np/nd;
vec2coord=vec2(dot(normX,tp),dot(normY,tp));
//angle=15degree
constfloatflwrsn=0.258819045102521;
constfloatflwrcs=0.965925826289068;
mat2flwrm=mat2(flwrcs,-flwrsn,flwrsn,flwrcs);
vec2flwrp=vec2(abs(coord.x),coord.y)*flwrm;
floatr;
if(flwrp.x<0.0){
r=ellipse(flwrp,vec2(0.065,0.024)*0.5,vec2(0.36,0.96)*0.5);
}
else{
r=ellipse(flwrp,vec2(0.065,0.024)*0.5,vec2(0.58,0.96)*0.5);
}
if(r>rstop)discard;
vec3col=mix(vec3(1.0,0.8,0.75),vec3(1.0,0.9,0.87),r);
floatgrady=mix(0.0,1.0,pow(coord.y*0.5+0.5,0.35));
col*=vec3(1.0,grady,grady);
col*=mix(0.8,1.0,pow(abs(coord.x),0.3));
col=col*diffuse+specular;
col=mix(fadeCol,col,distancefade);
floatalpha=(rstop>0.001)?(0.5-r/(rstop*2.0)):1.0;
alpha=smoothstep(0.0,1.0,alpha)*palpha;
gl_FragColor=vec4(col*0.5,alpha);
}
</script>
<!–effects–>
<scriptid=”fx_common_vsh”type=”x-shader/x_vertex”>
uniformvec3uResolution;
attributevec2aPosition;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
gl_Position=vec4(aPosition,0.0,1.0);
texCoord=aPosition.xy*0.5+vec2(0.5,0.5);
screenCoord=aPosition.xy*vec2(uResolution.z,1.0);
}
</script>
<scriptid=”bg_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformvec2uTimes;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
vec3col;
floatc;
vec2tmpv=texCoord*vec2(0.8,1.0)-vec2(0.95,1.0);
c=exp(-pow(length(tmpv)*1.8,2.0));
col=mix(vec3(0.02,0.0,0.03),vec3(0.96,0.98,1.0)*1.5,c);
gl_FragColor=vec4(col*0.5,1.0);
}
</script>
<scriptid=”fx_brightbuf_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformsampler2DuSrc;
uniformvec2uDelta;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
vec4col=texture2D(uSrc,texCoord);
gl_FragColor=vec4(col.rgb*2.0-vec3(0.5),1.0);
}
</script>
<scriptid=”fx_dirblur_r4_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformsampler2DuSrc;
uniformvec2uDelta;
uniformvec4uBlurDir;//dir(x,y),stride(z,w)
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
vec4col=texture2D(uSrc,texCoord);
col=col+texture2D(uSrc,texCoord+uBlurDir.xy*uDelta);
col=col+texture2D(uSrc,texCoord-uBlurDir.xy*uDelta);
col=col+texture2D(uSrc,texCoord+(uBlurDir.xy+uBlurDir.zw)*uDelta);
col=col+texture2D(uSrc,texCoord-(uBlurDir.xy+uBlurDir.zw)*uDelta);
gl_FragColor=col/5.0;
}
</script>
<!–effectfragmentshadertemplate–>
<scriptid=”fx_common_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformsampler2DuSrc;
uniformvec2uDelta;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
gl_FragColor=texture2D(uSrc,texCoord);
}
</script>
<!–postprocessing–>
<scriptid=”pp_final_vsh”type=”x-shader/x_vertex”>
uniformvec3uResolution;
attributevec2aPosition;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
gl_Position=vec4(aPosition,0.0,1.0);
texCoord=aPosition.xy*0.5+vec2(0.5,0.5);
screenCoord=aPosition.xy*vec2(uResolution.z,1.0);
}
</script>
<scriptid=”pp_final_fsh”type=”x-shader/x_fragment”>
#ifdefGL_ES
//precisionmediumpfloat;
precisionhighpfloat;
#endif
uniformsampler2DuSrc;
uniformsampler2DuBloom;
uniformvec2uDelta;
varyingvec2texCoord;
varyingvec2screenCoord;
voidmain(void){
vec4srccol=texture2D(uSrc,texCoord)*2.0;
vec4bloomcol=texture2D(uBloom,texCoord);
vec4col;
col=srccol+bloomcol*(vec4(1.0)+srccol);
col*=smoothstep(1.0,0.0,pow(length((texCoord-vec2(0.5))*2.0),1.2)*0.5);
col=pow(col,vec4(0.45454545454545));//(1.0/2.2)
gl_FragColor=vec4(col.rgb,1.0);
gl_FragColor.a=1.0;
}
</script>
<script>
//Utilities
varVector3={};
varMatrix44={};
Vector3.create=function(x,y,z){
return{‘x’:x,’y’:y,’z’:z};
};
Vector3.dot=function(v0,v1){
returnv0.x*v1.x+v0.y*v1.y+v0.z*v1.z;
};
Vector3.cross=function(v,v0,v1){
v.x=v0.y*v1.z-v0.z*v1.y;
v.y=v0.z*v1.x-v0.x*v1.z;
v.z=v0.x*v1.y-v0.y*v1.x;
};
Vector3.normalize=function(v){
varl=v.x*v.x+v.y*v.y+v.z*v.z;
if(l>0.00001){
l=1.0/Math.sqrt(l);
v.x*=l;
v.y*=l;
v.z*=l;
}
};
Vector3.arrayForm=function(v){
if(v.array){
v.array[0]=v.x;
v.array[1]=v.y;
v.array[2]=v.z;
}
else{
v.array=newFloat32Array([v.x,v.y,v.z]);
}
returnv.array;
};
Matrix44.createIdentity=function(){
returnnewFloat32Array([1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0]);
};
Matrix44.loadProjection=function(m,aspect,vdeg,near,far){
varh=near*Math.tan(vdeg*Math.PI/180.0*0.5)*2.0;
varw=h*aspect;
m[0]=2.0*near/w;
m[1]=0.0;
m[2]=0.0;
m[3]=0.0;
m[4]=0.0;
m[5]=2.0*near/h;
m[6]=0.0;
m[7]=0.0;
m[8]=0.0;
m[9]=0.0;
m[10]=-(far+near)/(far-near);
m[11]=-1.0;
m[12]=0.0;
m[13]=0.0;
m[14]=-2.0*far*near/(far-near);
m[15]=0.0;
};
Matrix44.loadLookAt=function(m,vpos,vlook,vup){
varfrontv=Vector3.create(vpos.x-vlook.x,vpos.y-vlook.y,vpos.z-vlook.z);
Vector3.normalize(frontv);
varsidev=Vector3.create(1.0,0.0,0.0);
Vector3.cross(sidev,vup,frontv);
Vector3.normalize(sidev);
vartopv作者:阙澹宁https://www.bilibili.com/read/cv5998025/?ivk_sa=1024320u出处:bilibili

未经允许不得转载:迅闻网 » html代码烟花特效(html樱花飘落代码)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页