最浪漫的编程代码可复制(浪漫表白的html5程序代码)
45baike
2022-04-28
279次阅读
序言:每当过节的时候,女朋友就抱怨我总是忘记给她买花,说程序不懂浪漫,这不我准备了几款爱心动画特效,打算当面向她表达一下。
第一款:html5通过canvas实现浪漫告白爱心动画特效
寓意:告白无须多么华丽的语言,一颗颗小的爱心汇聚成一颗真心,让你的另一半感受到浓浓的爱意。
代码难度系数★★★
新建index.html,复制以下代码保存在浏览器中打开即可。
<!doctypehtml><html><head><metacharset="utf-8"><title>canvas心</title><style>html,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;height:100%;}</style></head><body><canvasid="pinkboard"></canvas><script>/**Settings*/varsettings={particles:{length:500,//maximumamountofparticlesduration:2,//particledurationinsecvelocity:100,//particlevelocityinpixels/seceffect:-0.75,//playwiththisforaniceeffectsize:30,//particlesizeinpixels},};/**RequestAnimationFramepolyfillbyErikM?ller*/(function(){varb=0;varc=["ms","moz","webkit","o"];for(vara=0;a<c.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;i<particles.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(firstActive<firstFree){for(i=firstActive;i<firstFree;i++)particles[i].update(deltaTime);}if(firstFree<firstActive){for(i=firstActive;i<particles.length;i++)particles[i].update(deltaTime);for(i=0;i<firstFree;i++)particles[i].update(deltaTime);}//removeinactiveparticleswhile(particles[firstActive].age>=duration&&firstActive!=firstFree){firstActive++;if(firstActive==particles.length)firstActive=0;}};ParticlePool.prototype.draw=function(context,image){//drawactiveparticlesif(firstActive<firstFree){for(i=firstActive;i<firstFree;i++)particles[i].draw(context,image);}if(firstFree<firstActive){for(i=firstActive;i<particles.length;i++)particles[i].draw(context,image);for(i=0;i<firstFree;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(160*Math.pow(Math.sin(t),3),130*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/350;point.y=settings.particles.size/2-point.y*settings.particles.size/350;returnpoint;}//createthepathcontext.beginPath();vart=-Math.PI;varpoint=to(t);context.moveTo(point.x,point.y);while(t<Math.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()/1000,deltaTime=newTime-(time||newTime);time=newTime;//clearcanvascontext.clearRect(0,0,canvas.width,canvas.height);//createnewparticlesvaramount=particleRate*deltaTime;for(vari=0;i<amount;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'));</script></body></html>
第二款:html5通过canvas实现爱心气球上升动画特效
寓意:将想说的话打开一颗颗的爱心气球上,随着气球不断的升空,让整个氛围可更加地缠绵,看到此处可以有感动的泪水。
代码难度系数★★★
新建index.html,复制以下代码保存在浏览器中打开即可。
<!doctypehtml><html><head><metacharset="utf-8"><title>情人节快乐:)</title><style>canvas{position:absolute;top:0;left:0;}</style></head><body><canvasid=c></canvas><script>varw=c.width=window.innerWidth,h=c.height=window.innerHeight,ctx=c.getContext('2d'),opts={phrases:["Don'tdie\nit'snothard","You'retheBest","Everyday,\nYou'rebeautiful","Everyoccasion,\nYou'reclever","AworldwithoutYou?\nNah","Keepkickingass","You'rebetterthanthem,\nwhoevertheyare","You'rejustamazing","Youare,\nthereforeIam","NothingbetterthanYou\ncouldhavehappenedtotheworld"],balloons:10,baseVelY:-1,addedVelY:-1,baseVelX:-.25,addedVelX:.5,baseSize:20,addedSize:10,baseSizeAdder:2,addedSizeAdder:2,baseIncrementer:.01,addedIncrementer:.03,baseHue:-10,addedHue:30,font:'15pxVerdana'},cycle=0,balloons=[];ctx.font=opts.font;functionBalloon(){this.reset();}Balloon.prototype.reset=function(){this.size=opts.baseSize+opts.addedSize*Math.random();this.sizeAdder=opts.baseSizeAdder+opts.addedSizeAdder*Math.random();this.incrementer=opts.baseIncrementer+opts.addedIncrementer*Math.random();this.tick=0;this.x=Math.random()*w;this.y=h+this.size;this.vx=opts.baseVelX+opts.addedVelX*Math.random();this.vy=opts.baseVelY+opts.addedVelY*Math.random();this.color='hsla(hue,70%,60%,.8)'.replace('hue',opts.baseHue+opts.addedHue*Math.random());this.phrase=opts.phrases[++cycle%opts.phrases.length].split('\n');this.lengths=[];for(vari=0;i<this.phrase.length;++i)this.lengths.push(-ctx.measureText(this.phrase[i]).width/2);}Balloon.prototype.step=function(){this.tick+=this.incrementer;this.x+=this.vx;this.y+=this.vy;varsize=this.size+this.sizeAdder*Math.sin(this.tick);ctx.lineWidth=size/40;ctx.strokeStyle='#eee';ctx.beginPath();ctx.moveTo(this.x,this.y-2);ctx.lineTo(this.x,this.y+size);ctx.stroke();ctx.fillStyle=this.color;ctx.translate(this.x,this.y);ctx.rotate(Math.PI/4);//ctx.fillRect(-size/2,-size/2,size/2,size/2);ctx.beginPath();ctx.moveTo(0,0);ctx.arc(-size/2,-size/2+size/4,size/4,Math.PI/2,Math.PI*3/2);ctx.arc(-size/2+size/4,-size/2,size/4,Math.PI,Math.PI*2);ctx.lineTo(0,0);ctx.fill();ctx.rotate(-Math.PI/4);ctx.translate(-this.x,-this.y);ctx.translate(this.x,this.y+size+15);ctx.scale(size/this.size,size/this.size);ctx.fillStyle='#eee';for(vari=0;i<this.phrase.length;++i)ctx.fillText(this.phrase[i],this.lengths[i],i*15);ctx.scale(this.size/size,this.size/size);ctx.translate(-this.x,-(this.y+size+15));if(this.y<-size*3)this.reset();}functionanim(){window.requestAnimationFrame(anim);ctx.fillStyle='#222';ctx.fillRect(0,0,w,h);if(balloons.length<opts.balloons&&Math.random()<.01)balloons.push(newBalloon);for(vari=0;i<balloons.length;++i)balloons[i].step();}anim();</script></body></html>
第三款:jQuery+css3实现爱心雨动画特效
寓意:天空中下起了爱心雨,衬托的房间变得温暖,也让整个场景都变得温馨无比,想必此时可以有一个大大的拥抱。
代码难度系数★★★
代码有image、js和html,所以不好贴出来,有需要的朋友直接问我要吧。
总结:程序员的工作本身就很枯燥,特定找了几个好看的特效拿出来和大家分享,希望大家能够快乐每一天,上述代码亲测可用,欢迎点赞收藏。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。