HTML5 Canvas實現煙火綻放特效_html5教學技巧

本文為大家帶來了一款，免費又安全環保的HTML5 Canvas實現的放煙火特效。

效果如下：

程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. HTML>  
2. html>  
3.   頭>  
4.     標題>Canvas 🎜>標題>    
元 字符集=字符集>       元  -UA-相容" 內容="IE=edge"> 🎜>     元 
5. 名稱="視口"  內容=「寬度=設備寬度，高度=設備高度，初始比例=1.0，最大比例=1.0 ,user-scalable =no">       樣式
 
6. 類型>     html,body{高度:100%;邊距:0;填色:0}      ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}      img{border:0}   
7.   正文{背景顏色：#000；顏色：#999；字體：100%/18px helvetica、 arial、 sans-serif}   
8.   畫布{遊標:十字準線;顯示:塊;左:0;位置:絕對;頂部:0;z-index:20}   
9.   #header img{width:100%; 高度:20%;}   
10.   #bg img{寬度：100%; 高度:80%;}   
11.   #header,#bg{position:fixed;left:0;right:0;z-index:10}   
12.   #header{top:0}   
13.   #bg{position:fixed;z-index:1;bottom:0}   
14.   音訊{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}  
15.  樣式>  
16.   頭>  
17.   身體>  
18.  div id=id=id
=
19. 🎜>>     img id id = 🎜>
 
20. src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong jpg">  
21.  div>    腳本 src=
src
22. = /cdn.bootcss.com/jquery/2.2.0/jquery.min.js">腳本 >
23. 腳本 >
>
24. 腳本 > >腳本 > >腳本 >
25.     
腳本>
26.   
27.   $(function(){       var 煙火 = 函數
28. (){       var 
29. 自我 = 
30. 這個;   這個;        //產生煙火隨機數   
31.     var rand = 函數(rMi,       //按位取反練習         return ~~((Math.random()*(rMa-rMi 1)) rMi);        },hitTest = 函數(x1, h2){         返回！ (x1   w1 
 
32. x2 || x2  🎜>x1 ||  y1   h1    y1）；        };   
33.     //請求動畫影格   
34.     window.requestAnimFrame=函數(){  >
     返回 window.requestAnimationFrame   
      ||window.webkitRequestAnimationFrame   
      ||window.mozRequestAnimationFrame   
      ||window.oRequestAnimationFrame   
      ||window.msRequestAnimationFrame   
      ||函數（回呼）{   
       window.setTimeout(callback,1000/60);   
      }   
    }();   
43.     self.init = 函數(){>函數
44. (){       self.canvas = 文件..
     //canvas 全螢幕   
     
46. selfself.canvas.width = self      self
self.canvas.height
47.  = ).innerHeight();           self.articles = [];    
     
48. self.partCount = 150
49.      self.fireworks = [];          self
50. self.mx = self.cw/2;        self
51. self.my = self.ch/2;    = self.ch/2;         
52. self.currentHue = 30;      
53. self.partSpeed = 5; 🎜>;      self.partSpeedVariance
54.  = 10      self.partWind
55.  = 50;      self.partFriction = 
56. 5;      self.partGravity = 1
57. ;      self.hueMin = 0;
58.      self.hueMax = 360;      
59. self.fworkSpeed = 4;      self.fworkAccel
60.  = 10;      self.hueVariance = 
61. 30;      self.flickerDensity = 25
62.      self.showShockwave = true
;
63.      self.showTarget = false     self.clearAlpha = 25;   
64.      $(document.body).append(self.canvas);   
65.      selfself.ctx = self.canvas.getContext('2d');   
66.      self.ctx.lineCap = '圓形';   
67.      self.ctx.lineJoin = '圓形';   
68.      self.lineWidth = 1;   
69.      self.bindEvents();      
70.      self.canvasLoop();   
71.      self.canvas.onselectstart = 函數
      回傳 false；   
     }；   
    }；     
    // 建立包裝藥   
    
76. self.createParticles = 函數(x,p      var 
倒數
77.  = self.partCount;         while（倒數--）{   
78.       var 
newParticle
79.  = {           x: x,   
80.        y: y,   
81.        coordLast: [   
82.         {x: x, y: y},   
83.         {x: x, y: y},   
84.         {x: x, y: y}   
85.        ],   
86.         角度：rand(0, 360),   
87.        速度: rand(((self.partSpeed - self.partSpeedVariance) 
       摩擦力：1 - self.partFriction/100，  
88.        重力：self.partGravity/2，  
89.        色調：rand(hue-self.hueVariance, 色調 self.hueVariance),   
90.        亮度：rand(50, 80),   
91.        alpha：蘭特（40,100）/100，  
92.        衰變：rand(10, 50)/1000,   
93.        風：(rand(0, self.partWind) - (self.partWind/2))/25,   
94.        lineWidth: self.lineWidth   
95.       };       
96.       self.articles.push(newParticle);   
97.      }   
98.     }；   
99.     // 更新彈藥   
100.     self.updateParticles = 函數(
     var 
101. i = self.self.
     while(i--){   
      var 
103. p = self      var 弧度
104.  = p.       var vx = 
數學

105.       var vy = 數學

      p.速 *= p.摩擦力；   
106.       p.coordLast[2].x = p<.>
107.       p.coordLast[2].y
108.  = p       p.coordLast[1].x = 
p<.>
109.       p.coordLast[1].y = p<.>
      p.coordLast[0]
110. .x = p       p.coordLast[0]
111. .y = p       p.x  = vx;   
112.       p.y = vy；          p.y  = p.gravity；          p.angle = p.wind;       
113.       p.alpha -= p      if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) .alpha 
114.  
115. .05){        
       self.articles.splice(i, 1);    
      }   
118.      }；        };   
119.     // 均勻劑量   
120.     self.drawParticles = 函數(
     var 
121. i = self.self
.   
     while(i--){   
123.       var p = self
.articles          
124.       var coordRand
 = (rand(1,3)-1);   
      self.ctx.beginPath();           
      self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));   
      self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
      self.ctx.closePath();       
129.       self.ctx.strokeStyle = 'hsla('
130.       self.ctx.中風();       
131.       if(self.flickerDensity > 0){   
132.        var inverseDensity = 50 = 
133.        if(rand(0, inverseDensity) === inverseDensity){   
134.         self.ctx.beginPath();   
135.         self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth 3)/2, 0,205)
136.         self.ctx.closePath();   
137.         var randrandAlpha = rand(50,1000)/1000;   
138.         self.ctx.fillStyle = ？ .亮度'%,'randAlpha')';   
        self.ctx.fill();   
       }    
      }   
     }；   
    };   
143.     // 創建煙火       
144.     self.createFireworks = 函數      var 
145. newFirework = {          x： startX，  
146.       y：開始Y，  
147.       startX： startX，  
148.       startY： startY，  
149.       hitX：假，  
150.       hitY：假，  
151.       coordLast: [   
152.        {x: startX, y: startY},   
153.        {x: startX, y: startY},   
154.        {x: startX, y: startY}   
155.       ]，  
156.       targetX： targetX，  
157.       targetY: targetY,   
158.       速度：self.fworkSpeed，  
159.       角度：Math.atan2(targetY - startY, targetX - startX),   
160.       shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)),   
      加速度：self.fworkAccel/100，  
      色調：self.currentHue，  
      亮度：rand(50, 80),   
      alpha：蘭特（50,100）/100，  
      lineWidth: self.lineWidth   
     }；      
     self.fireworks.push(newFirework);   
    };   
169.     //更新煙火   
170.     self.updateFireworks = 函數(
     var 
171. i = self .   
     while(i--){   
      var 
173. f = self.          
174. self.ctx.lineWidth = f.lineWidth;          
175. vx = 數學       vy
 = 
176. .sin(.>.sin(f..angle);          f.speed *= 1   f.acceleration;       
177.       f.coordLast[2]
178. .x = ff
179.       f.coordLast[2].y = f   
180.       f.coordLast[1].x = f
f
181.          f.coordLast[1].y = 
f
182.          f.coordLast[0].x = 
f
183.       f.coordLast[0].y = f
184.       if(f.startX >
= f.targetX){   
185. = f.targetX){   = f.targetX){   
       if(f.x   vx 
186. = f.targetX){  = f.targetX){  = f.targetX){  
= f.targetX){  
187.         ff.x = f.targetX;   
188.         
f.hitX
189.  = 
true
190. ；   
191.        } 其他 {   
192.         f.x  = vx;           }   
193.       } 其他 {           if(f.x   vx >
= f.targetX){  
194. = f.targetX){  = f.targetX){  = f.targetX){           
f
195. f.x
= f.targetX;   
        
197. f.hitX = true；        } 其他 {            f.x  = vx;           }  
198.       }   
199.       if(f.startY >= f.targetY){   
= f.targetY){   
200. = f.targetY){           if(f.y   vy 
= f.targetY){          ff.y = f.targetY;   
201.         f.hitY = true
；
202.        } 其他 {   
203.         f.y  = vy;   
204.        }   
205.       } 其他 {   
206.        if(f.y   vy >= f.targetY){ >
        
207. ff.y = f.targetY;   
        
208. f.hitY = true;   
209.        } 其他 {   
210.         f.y  = vy;   
211.        }   
212.       }       
213.       if(f.hitX && f.hitY){   
214.        self.createParticles(f.targetX, f.targetY, f.hue);   
215.        self.fireworks.splice(i, 1);   
216.       }   
217.      }；   
218.     };   
219.     // 均勻煙火   
220.     self.drawFireworks = 函數(){  
     var 
221. i = self .   
     
222. self.ctx.globalCompositeOperation = '更輕' = '更輕';   
223.      while(i--){   
224.       var f = self.     
225.       self.ctx.lineWidth = f.lineWidth;   
226.       var coordRand = (rand(1,3)-1);        
227.       self.ctx.beginPath();          
228.       self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
229.       self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   
230.       self.ctx.closePath();   
231.       self.ctx.strokeStyle = 'hsla(' = 
232.       self.ctx.中風();    
233.       if(self.showTarget){   
234.        self.ctx.save();   
235.        self.ctx.beginPath();   
236.        self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand
237.        self.ctx.closePath();   
238.        self.ctx.lineWidth = 1;   
239.        self.ctx.中風();   
240.        self.ctx.restore();   
241.       }  
242.       if(self.showShockwave){   
243.        self.ctx.save();   
244.        self.ctx.translate(Math.round(f.x), Math.round(f.y));   
245.        self.ctx.rotate(f.shockwaveAngle);   
246.        self.ctx.beginPath();   
247.        self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);   
248.        self.ctx.strokeStyle = 'hsla(' = 'hsla('
 = 
249. 'hsla('        
self.ctx.lineWidth
250.  = f.lineWidth;   
251.        self.ctx.中風();   
252.        self.ctx.restore();   
253.       }   
254.      }；   
255.     }；   
256.     // 綁定事件        self.bindEvents = 
函數
257. ()
258.      $(window).on('resize', function(){      
259.       clearTimeout(self.timeout);          self.timeout = 
setTimeout
260. setTimeout        selfself.canvas.width
 =o        selfself.canvas.height  self ).innerHeight();   
261.        self.ctx.lineCap = '圓形' = 
'圓形'
262. ;           self.ctx.lineJoin = 
'圓形'
263.  = '圓形'
264. ;          }, 100);         }）；   
265.      $(self.canvas).on('mousedown', function(e){   
266.       self.mx = e.pageX - self.canvas.offsetLeft;   
267.       self.my = e.pageY - self.canvas.offsetTop;   
268.       self.currentHue = rand(self.hu>rand
269. (self.hu   
270.       self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    
271.       $(self.canvas).on('mousemove.fireworks', function(e){           self.mx
272.  = e.pageX - self.canvas.offsetLeft;           self.my
273.  = e.pageY - self.canvas.offsetTop;           self.currentHue = rand
274. rand
276.        self.createFireworks(self.cw/2, self.ch, self.mx, self.my);            
277.       }）；       
278.      });   
279.      $(self.canvas).on('mouseup', function(e){   
280.       $(self.canvas).off('mousemove.fireworks');            
281.      });        }；        self.clear
282.  = 函數(){🎜>函數
(){  >
283.      self.articles = [];   
284.      
self.fireworks
285.  = [];   
286.      self.ctx.clearRect(0, 0, self.cw, self.ch);        }；        
self.canvasLoop
287.  = 
函數
288. ()      requestAnimFrame(self.canvasLoop, self.canvas);            
self.ctx.globalCompositeOperation
289.  = 'destination-out      
290. self.ctx.fillStyle = 
291. 'rgba(0,0,0,00,0,0,000 100 ')';   
292.      self.ctx.fillRect(0,0,self.cw,self.ch);   
293.      self.updateFireworks();   
294.      self.updateParticles();   
295.      self.drawFireworks();      
296.      self.drawParticles();   
297.     }；        self.init();         }  
298.    var fworks = new
   $('#info-toggle').on('click', function(e){   
    $('#info-inner').stop(false, true).slideToggle(100);   
    e.preventDefault();   
   });    
  });   
 
304. 腳本>  
 
305. 畫布 寬度=寬度= 🎜> 身高="449">> >
306.      身體>
307.    html>

  

不是被HTML5強大的效果驚呆了，一飽眼福了吧。