JavaScript实现外溢动态爱心的效果的示例代码 JavaScript实现外溢动态爱心的效

【JavaScript实现外溢动态爱心的效果的示例代码】还在为节日送女朋友什么礼物而烦恼吗？最近用JavaScript制作了一个外溢动态爱心的效果，还可以在爱心上填写你想要的文字！快学习一下给自己女朋友也diy一个吧
效果演示

源码介绍

(function(){var b=0; var c=["ms","moz","webkit","o"]; for(var a=0; a= duration && firstActive != firstFree) {firstActive++; if (firstActive == particles.length) firstActive = 0; }}; ParticlePool.prototype.draw = function(context, image) {// draw active particlesif (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; })(); /* * Putting it all together */(function(canvas) {var context = canvas.getContext('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime; // get point on heart with -PI <= t <= PIfunction pointOnHeart(t) {return new Point(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); }// creating the particle image using a dummy canvasvar image = (function() {var canvas= document.createElement('canvas'),context = canvas.getContext('2d'); canvas.width= settings.particles.size; canvas.height = settings.particles.size; // helper function to create the pathfunction to(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; }// create the pathcontext.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(); // create the fillcontext.fillStyle = '#ea80b0'; context.fill(); // create the imagevar image = new Image(); image.src = https://www.it610.com/article/canvas.toDataURL(); return image; })(); // render that thing!function render() {// next animation framerequestAnimationFrame(render); // update timevar newTime= new Date().getTime() / 1000,deltaTime = newTime - (time || newTime); time = newTime; // clear canvascontext.clearRect(0, 0, canvas.width, canvas.height); // create new particlesvar 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); }// update and draw particlesparticles.update(deltaTime); particles.draw(context, image); }// handle (re-)sizing of the canvasfunction onResize() {canvas.width= canvas.clientWidth; canvas.height = canvas.clientHeight; }window.onresize = onResize; // delay rendering bootstrapsetTimeout(function() {onResize(); render(); }, 10); })(document.getElementById('pinkboard'));

源码地址
以上就是JavaScript实现外溢动态爱心的效果的示例代码的详细内容，更多关于JavaScript动态爱心的资料请关注脚本之家其它相关文章！