代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Canvas 绘制一个❤</title><linkrel="shortcut icon"href="../../assets/images/icon/favicon.ico"type="image/x-icon"><style>html,1 body{height: 100%;padding: 0;margin: 0;}canvas{position: absolute;width: 100%;height: 100%;}</style></head><body><canvasid="pinkboard"> 2 Canvas Not Support 3</canvas><script>/* 4 * Settings 5 */var settings ={particles:{length:500,// maximum amount of particlesduration:2,// particle duration in secvelocity:100,// particle velocity in pixels/seceffect:-0.75,// play with this for a nice effectsize:30,// particle size in pixels},};/* 6 * RequestAnimationFrame polyfill by Erik M?ller 7 */(function(){var b =0;var c =["ms","moz","webkit","o"];for(var a =0; a < c.length &&!window.requestAnimationFrame;++a){ 8 window.requestAnimationFrame = window[c[a]+"RequestAnimationFrame"]; 9 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){ 10 window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());/* 11 * Point class 12 */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;})();/* 13 * Particle class 14 */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); 15 context.globalAlpha =1-this.age / settings.particles.duration; 16 context.drawImage(image,this.position.x - size /2,this.position.y - size /2, size, size);};return Particle;})();/* 17 * ParticlePool class 18 */var ParticlePool =(function(){var particles, 19 firstActive =0, 20 firstFree =0, 21 duration = settings.particles.duration;functionParticlePool(length){// create and populate particle pool 22 particles =newArray(length);for(var i =0; i < particles.length; i++) 23 particles[i]=newParticle();}ParticlePool.prototype.add=function(x, y, dx, dy){ 24 particles[firstFree].initialize(x, y, dx, dy);// handle circular queue 25 firstFree++;if(firstFree == particles.length) firstFree =0;if(firstActive == firstFree) firstActive++;if(firstActive == particles.length) firstActive =0;};ParticlePool.prototype.update=function(deltaTime){var i;// update active particlesif(firstActive < firstFree){for(i = firstActive; i < firstFree; i++) 26 particles[i].update(deltaTime);}if(firstFree < firstActive){for(i = firstActive; i < particles.length; i++) 27 particles[i].update(deltaTime);for(i =0; i < firstFree; i++) 28 particles[i].update(deltaTime);}// remove inactive particleswhile(particles[firstActive].age >= duration && firstActive != firstFree){ 29 firstActive++;if(firstActive == particles.length) firstActive =0;}};ParticlePool.prototype.draw=function(context, image){// draw active particlesif(firstActive < firstFree){for(i = firstActive; i < firstFree; i++) 30 particles[i].draw(context, image);}if(firstFree < firstActive){for(i = firstActive; i < particles.length; i++) 31 particles[i].draw(context, image);for(i =0; i < firstFree; i++) 32 particles[i].draw(context, image);}};return ParticlePool;})();/* 33 * Putting it all together 34 */(function(canvas){var context = canvas.getContext('2d'), 35 particles =newParticlePool(settings.particles.length), 36 particleRate = settings.particles.length / settings.particles.duration,// particles/sec 37 time;// get point on heart with -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);}// creating the particle image using a dummy canvasvar image =(function(){var canvas = document.createElement('canvas'), 38 context = canvas.getContext('2d'); 39 canvas.width = settings.particles.size; 40 canvas.height = settings.particles.size;// helper function to create the pathfunctionto(t){var point =pointOnHeart(t); 41 point.x = settings.particles.size /2+ point.x * settings.particles.size /350; 42 point.y = settings.particles.size /2- point.y * settings.particles.size /350;return point;}// create the path 43 context.beginPath();var t =-Math.PI;var point =to(t); 44 context.moveTo(point.x, point.y);while(t < Math.PI){ 45 t +=0.01;// baby steps! 46 point =to(t); 47 context.lineTo(point.x, point.y);} 48 context.closePath();// create the fill 49 context.fillStyle ='#ea80b0'; 50 context.fill();// create the imagevar image =newImage(); 51 image.src = canvas.toDataURL();return image;})();// render that thing!functionrender(){// next animation framerequestAnimationFrame(render);// update timevar newTime =newDate().getTime()/1000, 52 deltaTime = newTime -(time || newTime); 53 time = newTime;// clear canvas 54 context.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); 55 particles.add(canvas.width /2+ pos.x, canvas.height /2- pos.y, dir.x,-dir.y);}// update and draw particles 56 particles.update(deltaTime); 57 particles.draw(context, image);}// handle (re-)sizing of the canvasfunctiononResize(){ 58 canvas.width = canvas.clientWidth; 59 canvas.height = canvas.clientHeight;} 60 window.onresize = onResize;// delay rendering bootstrapsetTimeout(function(){onResize();render();},10);})(document.getElementById('pinkboard'));</script></body></html>