html5+canvas制作烟花动画特效

新建html文档。

书写html。

书写css样式。

添加JS引用。（min包js）

书写js。

书写firework.js。(function($){$.fn.fireworks=function(options){options=options||{};options.width=options.width||$(this).width();options.height=options.height||$(this).height();var fireworksField=this,SCREEN_WIDTH=options.width,SCREEN_HEIGHT=options.height,rockets=[],particles=[];var canvas=document.createElement('canvas');canvas.style.width=SCREEN_WIDTH+'px';canvas.style.height=SCREEN_HEIGHT+'px';canvas.width=SCREEN_WIDTH;canvas.height=SCREEN_HEIGHT;canvas.style.position='absolute';canvas.style.top='0px';canvas.style.left='0px';var context=canvas.getContext('2d');var mousePos={};var gravity=0.05;var raf;$(fireworksField).append(canvas);document.onmousemove=mouseMove;setInterval(launch,2000);raf=window.requestAnimationFrame(loop);function mouseMove(ev){ev=ev||window.event;mousePos=mousePosition(ev)}function mousePosition(ev){if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY}}return{x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,y:ev.clientY+document.body.scrollTop-document.body.clientTop}}function launch(){if(rockets.length<10){var rocket=new Rocket(SCREEN_WIDTH/2);rocket.v.x=Math.random()*6-3;rocket.v.y=Math.random()*-30-4;rocket.color=Math.floor(Math.random()*360/10)*10;rockets.push(rocket)}}function loop(){var existRockets=[];var existParticles=[];if(SCREEN_WIDTH!=window.innerWidth){canvas.width=SCREEN_WIDTH=window.innerWidth}if(SCREEN_HEIGHT!=window.innerHeight){canvas.height=SCREEN_HEIGHT=window.innerHeight}context.fillStyle='rgba(0,0,0,0.05)';context.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);for(var i=0;i=0.02&&this.size>0.8){return true}else{return false}};function Rocket(x){Particle.apply(this,[{x:x,y:SCREEN_HEIGHT}])}(function(){var Super=function(){};Super.prototype=Particle.prototype;Rocket.prototype=new Super()})();Rocket.prototype.constructor=Rocket;Rocket.prototype.update=function(){this.pos.x+=this.v.x;this.pos.y+=this.v.y};Rocket.prototype.render=function(context){var x=this.pos.x,y=this.pos.y,r=this.size/2;var gradient=context.createRadialGradient(x,y,0.1,x,y,r);gradient.addColorStop(0,'#ffff00');gradient.addColorStop(1,'rgba(0, 0, 0, 1)');context.fillStyle=gradient;context.beginPath();context.arc(x,y,r,0,2*Math.PI,true);context.closePath();context.fill()};Rocket.prototype.explode=function(){var count=getGaussianDistributionNumber(240,20);for(var i=0;i<=count;i++){var particle=new Particle(this.pos);var angle=Math.random()*Math.PI*2;var speed=getGaussianDistributionNumber(2.5,0.3);particle.size=3;particle.v.x=Math.cos(angle)*speed;particle.v.y=Math.sin(angle)*speed;particle.color=this.color;particles.push(particle)}};function getGaussianDistributionNumber(mean,std_dev){var U1=-Math.random()+1;var U2=-Math.random()+1;var R=Math.sqrt(-2*Math.log(U2));var a=2*Math.PI*U1;var Z=R*Math.cos(a);return mean+(Z*std_dev)}}}(jQuery));

页面整体代码结构。

查看动画特效效果。