HTML5 Canvas实现烟花绽放特效_html5教程技巧

本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板

1. nbsp;HTML>  
2. html>  
3.   head>  
4.     title>Canvas 实现放烟花特效title>  
5.  meta charset="utf-8">  
6.     meta http-equiv="X-UA-Compatible" content="IE=edge">  
7.     meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">  
8.     style type="text/css">  
9.   html,body{height:100%;margin:0;padding:0}   
10.   ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}   
11.   img{border:0}   
12.   body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}   
13.   canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   
14.   #header img{width:100%; height:20%;}   
15.   #bg img{width:100%; height:80%;}   
16.   #header,#bg{position:fixed;left:0;right:0;z-index:10}   
17.   #header{top:0}   
18.   #bg{position:fixed;z-index:1;bottom:0}   
19.   audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}   
20.  style>  
21.   head>  
22.   body>  
23.  div id="bg">  
24.   img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">  
25.  div>  
26.  script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js">script>  
27.  script>  
28.   $(function(){   
29.    var Fireworks = function(){   
30.     var self = this;   
31.     // 产生烟花随机数   
32.     var rand = function(rMi, rMa){   
33.      //按位取反运算符   
34.      return ~~((Math.random()*(rMa-rMi+1))+rMi);   
35.     },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){   
36.      return !(x1 + w1  x2 || x2 + w2  x1 || y1 + h1  y2 || y2 + h2  y1);   
37.     };   
38.     //请求动画帧   
39.     window.requestAnimFrame=function(){   
40.      return window.requestAnimationFrame   
41.       ||window.webkitRequestAnimationFrame   
42.       ||window.mozRequestAnimationFrame   
43.       ||window.oRequestAnimationFrame   
44.       ||window.msRequestAnimationFrame   
45.       ||function(callback){   
46.        window.setTimeout(callback,1000/60);   
47.       }   
48.     }();   
49.     self.init = function(){    
50.      self.canvas = document.createElement('canvas');     
51.      //canvas 全屏   
52.      selfself.canvas.width = self.cw = $(window).innerWidth();   
53.      selfself.canvas.height = self.ch = $(window).innerHeight();     
54.      self.particles = [];    
55.      self.partCount = 150;   
56.      self.fireworks = [];    
57.      selfself.mx = self.cw/2;   
58.      selfself.my = self.ch/2;   
59.      self.currentHue = 30;   
60.      self.partSpeed = 5;   
61.      self.partSpeedVariance = 10;   
62.      self.partWind = 50;   
63.      self.partFriction = 5;   
64.      self.partGravity = 1;   
65.      self.hueMin = 0;   
66.      self.hueMax = 360;   
67.      self.fworkSpeed = 4;   
68.      self.fworkAccel = 10;   
69.      self.hueVariance = 30;   
70.      self.flickerDensity = 25;   
71.      self.showShockwave = true;   
72.      self.showTarget = false;   
73.      self.clearAlpha = 25;   
74.      $(document.body).append(self.canvas);   
75.      selfself.ctx = self.canvas.getContext('2d');   
76.      self.ctx.lineCap = 'round';   
77.      self.ctx.lineJoin = 'round';   
78.      self.lineWidth = 1;   
79.      self.bindEvents();      
80.      self.canvasLoop();   
81.      self.canvas.onselectstart = function() {   
82.       return false;   
83.      };   
84.     };     
85.     // 创建粒子   
86.     self.createParticles = function(x,y, hue){   
87.      var countdown = self.partCount;   
88.      while(countdown--){   
89.       var newParticle = {   
90.        x: x,   
91.        y: y,   
92.        coordLast: [   
93.         {x: x, y: y},   
94.         {x: x, y: y},   
95.         {x: x, y: y}   
96.        ],   
97.        angle: rand(0, 360),   
98.        speed: rand(((self.partSpeed - self.partSpeedVariance) = 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),   
99.        friction: 1 - self.partFriction/100,   
100.        gravity: self.partGravity/2,   
101.        hue: rand(hue-self.hueVariance, hue+self.hueVariance),   
102.        brightness: rand(50, 80),   
103.        alpha: rand(40,100)/100,   
104.        decay: rand(10, 50)/1000,   
105.        wind: (rand(0, self.partWind) - (self.partWind/2))/25,   
106.        lineWidth: self.lineWidth   
107.       };       
108.       self.particles.push(newParticle);   
109.      }   
110.     };   
111.     // 更新粒子   
112.     self.updateParticles = function(){   
113.      var i = self.particles.length;   
114.      while(i--){   
115.       var p = self.particles[i];   
116.       var radians = p.angle * Math.PI / 180;   
117.       var vx = Math.cos(radians) * p.speed;   
118.       var vy = Math.sin(radians) * p.speed;   
119.       p.speed *= p.friction;   
120.       p.coordLast[2].x = p.coordLast[1].x;   
121.       p.coordLast[2].y = p.coordLast[1].y;   
122.       p.coordLast[1].x = p.coordLast[0].x;   
123.       p.coordLast[1].y = p.coordLast[0].y;   
124.       p.coordLast[0].x = p.x;   
125.       p.coordLast[0].y = p.y;   
126.       p.x += vx;   
127.       p.y += vy;   
128.       p.y += p.gravity;   
129.       p.angle += p.wind;       
130.       p.alpha -= p.decay;   
131.       if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha  .05){        
132.        self.particles.splice(i, 1);    
133.       }   
134.      };   
135.     };   
136.     // 绘制粒子   
137.     self.drawParticles = function(){   
138.      var i = self.particles.length;   
139.      while(i--){   
140.       var p = self.particles[i];          
141.       var coordRand = (rand(1,3)-1);   
142.       self.ctx.beginPath();           
143.       self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));   
144.       self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
145.       self.ctx.closePath();       
146.       self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';   
147.       self.ctx.stroke();       
148.       if(self.flickerDensity > 0){   
149.        var inverseDensity = 50 - self.flickerDensity;        
150.        if(rand(0, inverseDensity) === inverseDensity){   
151.         self.ctx.beginPath();   
152.         self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)   
153.         self.ctx.closePath();   
154.         var randrandAlpha = rand(50,100)/100;   
155.         self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';   
156.         self.ctx.fill();   
157.        }    
158.       }   
159.      };   
160.     };   
161.     // 创建烟花       
162.     self.createFireworks = function(startX, startY, targetX, targetY){   
163.      var newFirework = {   
164.       x: startX,   
165.       y: startY,   
166.       startX: startX,   
167.       startY: startY,   
168.       hitX: false,   
169.       hitY: false,   
170.       coordLast: [   
171.        {x: startX, y: startY},   
172.        {x: startX, y: startY},   
173.        {x: startX, y: startY}   
174.       ],   
175.       targetX: targetX,   
176.       targetY: targetY,   
177.       speed: self.fworkSpeed,   
178.       angle: Math.atan2(targetY - startY, targetX - startX),   
179.       shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),   
180.       acceleration: self.fworkAccel/100,   
181.       hue: self.currentHue,   
182.       brightness: rand(50, 80),   
183.       alpha: rand(50,100)/100,   
184.       lineWidth: self.lineWidth   
185.      };      
186.      self.fireworks.push(newFirework);   
187.     };   
188.     // 更新烟花   
189.     self.updateFireworks = function(){   
190.      var i = self.fireworks.length;   
191.      while(i--){   
192.       var f = self.fireworks[i];   
193.       self.ctx.lineWidth = f.lineWidth;   
194.       vx = Math.cos(f.angle) * f.speed,   
195.       vy = Math.sin(f.angle) * f.speed;   
196.       f.speed *= 1 + f.acceleration;       
197.       f.coordLast[2].x = f.coordLast[1].x;   
198.       f.coordLast[2].y = f.coordLast[1].y;   
199.       f.coordLast[1].x = f.coordLast[0].x;   
200.       f.coordLast[1].y = f.coordLast[0].y;   
201.       f.coordLast[0].x = f.x;   
202.       f.coordLast[0].y = f.y;   
203.       if(f.startX >= f.targetX){   
204.        if(f.x + vx = f.targetX){   
205.         ff.x = f.targetX;   
206.         f.hitX = true;   
207.        } else {   
208.         f.x += vx;   
209.        }   
210.       } else {   
211.        if(f.x + vx >= f.targetX){   
212.         ff.x = f.targetX;   
213.         f.hitX = true;   
214.        } else {   
215.         f.x += vx;   
216.        }   
217.       }   
218.       if(f.startY >= f.targetY){   
219.        if(f.y + vy = f.targetY){   
220.         ff.y = f.targetY;   
221.         f.hitY = true;   
222.        } else {   
223.         f.y += vy;   
224.        }   
225.       } else {   
226.        if(f.y + vy >= f.targetY){   
227.         ff.y = f.targetY;   
228.         f.hitY = true;   
229.        } else {   
230.         f.y += vy;   
231.        }   
232.       }       
233.       if(f.hitX && f.hitY){   
234.        self.createParticles(f.targetX, f.targetY, f.hue);   
235.        self.fireworks.splice(i, 1);   
236.       }   
237.      };   
238.     };   
239.     // 绘制烟花   
240.     self.drawFireworks = function(){   
241.      var i = self.fireworks.length;   
242.      self.ctx.globalCompositeOperation = 'lighter';   
243.      while(i--){   
244.       var f = self.fireworks[i];     
245.       self.ctx.lineWidth = f.lineWidth;   
246.       var coordRand = (rand(1,3)-1);        
247.       self.ctx.beginPath();          
248.       self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
249.       self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   
250.       self.ctx.closePath();   
251.       self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';   
252.       self.ctx.stroke();    
253.       if(self.showTarget){   
254.        self.ctx.save();   
255.        self.ctx.beginPath();   
256.        self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)   
257.        self.ctx.closePath();   
258.        self.ctx.lineWidth = 1;   
259.        self.ctx.stroke();   
260.        self.ctx.restore();   
261.       }   
262.       if(self.showShockwave){   
263.        self.ctx.save();   
264.        self.ctx.translate(Math.round(f.x), Math.round(f.y));   
265.        self.ctx.rotate(f.shockwaveAngle);   
266.        self.ctx.beginPath();   
267.        self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);   
268.        self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';   
269.        self.ctx.lineWidth = f.lineWidth;   
270.        self.ctx.stroke();   
271.        self.ctx.restore();   
272.       }   
273.      };   
274.     };   
275.     // 绑定事件   
276.     self.bindEvents = function(){   
277.      $(window).on('resize', function(){      
278.       clearTimeout(self.timeout);   
279.       self.timeout = setTimeout(function() {   
280.        selfself.canvas.width = self.cw = $(window).innerWidth();   
281.        selfself.canvas.height = self.ch = $(window).innerHeight();   
282.        self.ctx.lineCap = 'round';   
283.        self.ctx.lineJoin = 'round';   
284.       }, 100);   
285.      });   
286.      $(self.canvas).on('mousedown', function(e){   
287.       self.mx = e.pageX - self.canvas.offsetLeft;   
288.       self.my = e.pageY - self.canvas.offsetTop;   
289.       self.currentHue = rand(self.hueMin, self.hueMax);   
290.       self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    
291.       $(self.canvas).on('mousemove.fireworks', function(e){   
292.        self.mx = e.pageX - self.canvas.offsetLeft;   
293.        self.my = e.pageY - self.canvas.offsetTop;   
294.        self.currentHue = rand(self.hueMin, self.hueMax);   
295.        self.createFireworks(self.cw/2, self.ch, self.mx, self.my);            
296.       });       
297.      });   
298.      $(self.canvas).on('mouseup', function(e){   
299.       $(self.canvas).off('mousemove.fireworks');            
300.      });   
301.     };   
302.     self.clear = function(){   
303.      self.particles = [];   
304.      self.fireworks = [];   
305.      self.ctx.clearRect(0, 0, self.cw, self.ch);   
306.     };   
307.     self.canvasLoop = function(){   
308.      requestAnimFrame(self.canvasLoop, self.canvas);      
309.      self.ctx.globalCompositeOperation = 'destination-out';   
310.      self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';   
311.      self.ctx.fillRect(0,0,self.cw,self.ch);   
312.      self.updateFireworks();   
313.      self.updateParticles();   
314.      self.drawFireworks();      
315.      self.drawParticles();   
316.     };   
317.     self.init();     
318.    }   
319.    var fworks = new Fireworks();   
320.    $('#info-toggle').on('click', function(e){   
321.     $('#info-inner').stop(false, true).slideToggle(100);   
322.     e.preventDefault();   
323.    });    
324.   });   
325.  script>  
326.  canvas width="1400" height="449">canvas>  
327.   body>  
328. html>  

是不是被HTML5强大的效果惊呆了，一饱眼福了吧。