最浪漫的编程代码可复制（浪漫表白的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，所以不好贴出来，有需要的朋友直接问我要吧。

总结：程序员的工作本身就很枯燥，特定找了几个好看的特效拿出来和大家分享，希望大家能够快乐每一天，上述代码亲测可用，欢迎点赞收藏。