浪漫表白的html5程序代码

情感故事 2023-05-24 18:01:03

序言：每当过节的时候，女朋友就抱怨我总是忘记给她买花，说程序不懂浪漫，这不我准备了几款爱心动画特效，打算当面向她表达一下。

第一款：html5通过canvas实现浪漫告白爱心动画特效

寓意：告白无须多么华丽的语言，一颗颗小的爱心汇聚成一颗真心，让你的另一半感受到浓浓的爱意。

代码难度系数★★★

新建index.html，复制以下代码保存在浏览器中打开即可。

<metacharset="utf-8">canvas心<style>html，body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;height:100%;}</style><body><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=duration&&firstActive!=firstFree){firstActive++;if(firstActive==particles.length)firstActive=0;}};ParticlePool.prototype.draw=function(context，image){//drawactiveparticlesif(firstActive

第二款：html5通过canvas实现爱心气球上升动画特效

寓意：将想说的话打开一颗颗的爱心气球上，随着气球不断的升空，让整个氛围可更加地缠绵，看到此处可以有感动的泪水。

代码难度系数★★★

新建index.html，复制以下代码保存在浏览器中打开即可。

<metacharset="utf-8">情人节快乐:)<style>canvas{position:absolute;top:0;left:0;}</style><body><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