hello，分享一个好玩的，我想大家大家有时候也是比较累吧，最近这个特效也是很火，我就拔来了一下源码，这里和大家看一下，
【爱心代码｜源码在视频简介｜这次一定！】 https://www.bilibili.com/video/BV1Ye411F7EZ/?share_source=copy_web&vd_source=385ba0043075be7c24c4aeb4aaa73352
爱心代码｜源码在视频简介｜这次一定！
代码在这里：
<html><head><metacharset="utf-8"><title>loveHeart</title><linkrel="shortcut icon"href="http://zhouql.vip/images/心.png"type="image/x-icon"><style>html,
body{height: 100%;padding: 0;margin: 0;background: #000;}canvas{position: absolute;width: 100%;height: 100%;}p{position: fixed;top: 50%;left: 50%;transform:translate(-50%,-50%);color: pink;animation: k 1.5s ease-in-out infinite;}@keyframes k{100%{font-size: 24px;opacity: 0;}}</style></head><body><p>致我最爱的夏子恬小朋友</p><canvasid="pinkboard"></canvas><script>var settings ={particles:{length:600,// 爱心的大小duration:2,// 爱心扩散速度，越小速度越快velocity:100,// 爱心扩散速度，越小速度越慢effect:-0.75,// 爱心收缩效果，比如：1扩散，-2收缩size:26,// 爱心数量},};(function(){var b =0;var c =["ms","moz","webkit","o"];for(var a =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){var d =newDate().getTime();var f = Math.max(0,16-(d - b));var g = window.setTimeout(function(){h(d + f)}, f); b = d + f;return g }}if(!window.cancelAnimationFrame){ window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());var Point =(function(){functionPoint(x, y){this.x =(typeof x !=='undefined')? x :0;this.y =(typeof y !=='undefined')? y :0;}Point.prototype.clone=function(){returnnewPoint(this.x,this.y);};Point.prototype.length=function(length){if(typeof length =='undefined')return Math.sqrt(this.x *this.x +this.y *this.y);this.normalize();this.x *= length;this.y *= length;returnthis;};Point.prototype.normalize=function(){var length =this.length();this.x /= length;this.y /= length;returnthis;};return Point;})();var Particle =(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;}var size = 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);};return Particle;})();var ParticlePool =(function(){var particles,
firstActive =0,
firstFree =0,
duration = settings.particles.duration;functionParticlePool(length){// 创建并填充粒子池
particles =newArray(length);for(var i =0; i < particles.length; i++)
particles[i]=newParticle();}ParticlePool.prototype.add=function(x, y, dx, dy){
particles[firstFree].initialize(x, y, dx, dy);// 处理循环队列
firstFree++;if(firstFree == particles.length) firstFree =0;if(firstActive == firstFree) firstActive++;if(firstActive == particles.length) firstActive =0;};ParticlePool.prototype.update=function(deltaTime){var i;// 更新活性粒子if(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);}// 去除非活性颗粒while(particles[firstActive].age >= duration && firstActive != firstFree){
firstActive++;if(firstActive == particles.length) firstActive =0;}};ParticlePool.prototype.draw=function(context, image){// 绘制活性粒子if(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);}};return ParticlePool;})();(function(canvas){var context = canvas.getContext('2d'),
particles =newParticlePool(settings.particles.length),
particleRate = settings.particles.length / settings.particles.duration,// particles/sec
time;// 用 -PI <= t <= PI 获得心脏点functionpointOnHeart(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);}// 使用虚拟画布创建粒子图像var image =(function(){var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.width = settings.particles.size;
canvas.height = settings.particles.size;//用于创建路径的帮助程序函数functionto(t){var point =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;return point;}// 创建路径
context.beginPath();var t =-Math.PI;var point =to(t);
context.moveTo(point.x, point.y);while(t < Math.PI){
t +=0.01;// baby steps!
point =to(t);
context.lineTo(point.x, point.y);}
context.closePath();// 创建填充
context.fillStyle ='#ea80b0';
context.fill();// 创建映像var image =newImage();
image.src = canvas.toDataURL();return image;})();// 渲染那个东西！functionrender(){// 下一个动画帧requestAnimationFrame(render);// 更新时间var newTime =newDate().getTime()/1000,
deltaTime = newTime -(time || newTime);
time = newTime;// 透明画布，清楚画布
context.clearRect(0,0, canvas.width, canvas.height);// 创建新粒子var amount = particleRate * deltaTime;for(var i =0; i < amount; i++){var pos =pointOnHeart(Math.PI-2* Math.PI* Math.random());var dir = pos.clone().length(settings.particles.velocity);
particles.add(canvas.width /2+ pos.x, canvas.height /2- pos.y, dir.x,-dir.y);}//更新和绘制粒子
particles.update(deltaTime);
particles.draw(context, image);}// 处理（重新）调整画布的大小functiononResize(){
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;}
window.onresize = onResize;// 延迟渲染引导setTimeout(function(){onResize();render();},10);})(document.getElementById('pinkboard'));</script></body></html>
，人家写的就是不一样，这个Javascrip,还是要学好Javascrip，不然难办，这里的代码看起来都是迷迷糊糊的。
本文转载自: https://blog.csdn.net/muweichang/article/details/127766971
版权归原作者 极具浪漫主义色彩的菜鸟学习之路 所有， 如有侵权，请联系我们删除。
版权归原作者 极具浪漫主义色彩的菜鸟学习之路 所有， 如有侵权，请联系我们删除。