!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc="js/jquery.min.js"/script/headstyle*{padding:0;margin:0;}html,body{height:%;padding:0;margin:0;background:#;}.aa{position:fixed;left:50%;bottom:10px;color:#ccc;}.container{width:%;height:%;}canvas{z-index:99;position:absolute;width:%;height:%;}/stylebodydivid="jsi-cherry-container"class="container"audioautoplay="autopaly"sourcesrc="renxi.mp3"type="audio/mp3"//audioimgclass="img"src="./.png"alt=""/canvasid="pinkboard"class="container"/canvas/div/body/htmlscript/**Settings*/varsettings={particles:{length:,//maximumamountofparticlesduration:2,//particledurationinsecvelocity:,//particlevelocityinpixels/seceffect:-0.75,//playwiththisforaniceeffectsize:30,//particlesizeinpixels},};(function(){varb=0;varc=["ms","moz","webkit","o"];for(vara=0;ac.length!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]
window[c[a]+"CancelRequestAnimationFrame"];}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){vard=newDate().getTime();varf=Math.max(0,16-(d-b));varg=window.setTimeout(function(){h(d+f);},f);b=d+f;returng;};}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d);};}})();/**Pointclass*/varPoint=(function(){functionPoint(x,y){this.x=typeofx!=="undefined"?x:0;this.y=typeofy!=="undefined"?y:0;}Point.prototype.clone=function(){returnnewPoint(this.x,this.y);};Point.prototype.length=function(length){if(typeoflength=="undefined")returnMath.sqrt(this.x*this.x+this.y*this.y);this.normalize();this.x*=length;this.y*=length;returnthis;};Point.prototype.normalize=function(){varlength=this.length();this.x/=length;this.y/=length;returnthis;};returnPoint;})();/**Particleclass*/varParticle=(function(){functionParticle(){this.position=newPoint();this.velocity=newPoint();this.acceleration=newPoint();this.age=0;}Particle.prototype.initialize=function(x,y,dx,dy){this.position.x=x;this.position.y=y;this.velocity.x=dx;this.velocity.y=dy;this.acceleration.x=dx*settings.particles.effect;this.acceleration.y=dy*settings.particles.effect;this.age=0;};Particle.prototype.update=function(deltaTime){this.position.x+=this.velocity.x*deltaTime;this.position.y+=this.velocity.y*deltaTime;this.velocity.x+=this.acceleration.x*deltaTime;this.velocity.y+=this.acceleration.y*deltaTime;this.age+=deltaTime;};Particle.prototype.draw=function(context,image){functionease(t){return--t*t*t+1;}varsize=image.width*ease(this.age/settings.particles.duration);context.globalAlpha=1-this.age/settings.particles.duration;context.drawImage(image,this.position.x-size/2,this.position.y-size/2,size,size);};returnParticle;})();/**ParticlePoolclass*/varParticlePool=(function(){varparticles,firstActive=0,firstFree=0,duration=settings.particles.duration;functionParticlePool(length){//createandpopulateparticlepoolparticles=newArray(length);for(vari=0;iparticles.length;i++)particles[i]=newParticle();}ParticlePool.prototype.add=function(x,y,dx,dy){particles[firstFree].initialize(x,y,dx,dy);//handlecircularqueuefirstFree++;if(firstFree==particles.length)firstFree=0;if(firstActive==firstFree)firstActive++;if(firstActive==particles.length)firstActive=0;};ParticlePool.prototype.update=function(deltaTime){vari;//updateactiveparticlesif(firstActivefirstFree){for(i=firstActive;ifirstFree;i++)particles[i].update(deltaTime);}if(firstFreefirstActive){for(i=firstActive;iparticles.length;i++)particles[i].update(deltaTime);for(i=0;ifirstFree;i++)particles[i].update(deltaTime);}//removeinactiveparticleswhile(particles[firstActive].age=durationfirstActive!=firstFree){firstActive++;if(firstActive==particles.length)firstActive=0;}};ParticlePool.prototype.draw=function(context,image){//drawactiveparticlesif(firstActivefirstFree){for(i=firstActive;ifirstFree;i++)particles[i].draw(context,image);}if(firstFreefirstActive){for(i=firstActive;iparticles.length;i++)particles[i].draw(context,image);for(i=0;ifirstFree;i++)particles[i].draw(context,image);}};returnParticlePool;})();/**Puttingitalltogether*/(function(canvas){varcontext=canvas.getContext("2d"),particles=newParticlePool(settings.particles.length),particleRate=settings.particles.length/settings.particles.duration,//particles/sectime;//getpointonheartwith-PI=t=PIfunctionpointOnHeart(t){returnnewPoint(*Math.pow(Math.sin(t),3),*Math.cos(t)-50*Math.cos(2*t)-20*Math.cos(3*t)-10*Math.cos(4*t)+25);}//creatingtheparticleimageusingadummycanvasvarimage=(function(){varcanvas=document.createElement("canvas"),context=canvas.getContext("2d");canvas.width=settings.particles.size;canvas.height=settings.particles.size;//helperfunctiontocreatethepathfunctionto(t){varpoint=pointOnHeart(t);point.x=settings.particles.size/2+(point.x*settings.particles.size)/;point.y=settings.particles.size/2-(point.y*settings.particles.size)/;returnpoint;}//createthepathcontext.beginPath();vart=-Math.PI;varpoint=to(t);context.moveTo(point.x,point.y);while(tMath.PI){t+=0.01;//babysteps!point=to(t);context.lineTo(point.x,point.y);}context.closePath();//createthefillcontext.fillStyle="#ea80b0";context.fill();//createtheimagevarimage=newImage();image.src=canvas.toDataURL();returnimage;})();//renderthatthing!functionrender(){//nextanimationframerequestAnimationFrame(render);//updatetimevarnewTime=newDate().getTime()/0,deltaTime=newTime-(time
newTime);time=newTime;//clearcanvascontext.clearRect(0,0,canvas.width,canvas.height);//createnewparticlesvaramount=particleRate*deltaTime;for(vari=0;iamount;i++){varpos=pointOnHeart(Math.PI-2*Math.PI*Math.random());vardir=pos.clone().length(settings.particles.velocity);particles.add(canvas.width/2+pos.x,canvas.height/2-pos.y,dir.x,-dir.y);}//updateanddrawparticlesparticles.update(deltaTime);particles.draw(context,image);}//handle(re-)sizingofthecanvasfunctiononResize(){canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;}window.onresize=onResize;//delayrenderingbootstrapsetTimeout(function(){onResize();render();},10);})(document.getElementById("pinkboard"));/scriptscriptvarRENDERER={INIT_CHERRY_BLOSSOM_COUNT:30,MAX_ADDING_INTERVAL:10,init:function(){this.setParameters();this.reconstructMethods();this.createCherries();this.render();if(navigator.userAgent.match(/(phone
pod
iPhone
iPod
ios
Android
Mobile
BlackBerry
IEMobile
MQQBrowser
JUC
Fennec
wOSBrowser
BrowserNG
WebOS
Symbian
WindowsPhone)/i)){//varbox=document.querySelectorAll(".box")[0];//console.log(box,"移动端");//box.style.marginTop="65%";}},setParameters:function(){this.$container=$("#jsi-cherry-container");this.width=this.$container.width();this.height=this.$container.height();this.context=$("canvas/").attr({width:this.width,height:this.height}).appendTo(this.$container).get(0)varrate=this.FOCUS_POSITION/(this.z+this.FOCUS_POSITION),x=this.renderer.width/2+this.x*rate,y=this.renderer.height/2-this.y*rate;return{rate:rate,x:x,y:y};},re}}else{this.phi+=Math.PI/(axis.y==this.thresholdY?:);this.phi%=Math.PI;}if(this.y=-this.renderer.height*this.SURFACE_RATE){this.x+=2;this.y=-this.renderer.height*this.SURFACE_RATE;}else{this.x+=this.vx;this.y+=this.vy;}return(this.z-this.FOCUS_POSITIONthis.zthis.FAR_LIMITthis.xthis.renderer.width*1.5);},};$(function(){RENDERER.init();});/script