實例教學 HTML5 Canvas 超酷煙火綻放動畫實作程式碼_html5教學技巧

　　這是一個很酷的HTML5 Canvas動畫，它將模擬的是我們現實生活中煙火綻放的動畫特效，效果非常逼真，但是畢竟是電腦模擬，帶女朋友看就算了，效果還是差了點，呵呵。這個HTML5 Canvas動畫有一點比較出色，就是其效能，Chrome上基本上沒有卡片的感覺，就算你放出很多煙火也一樣。

　　下面我們來簡單分析實現這款HTML5煙火特效的過程及程式碼，主要由HTML程式碼、CSS程式碼以及Javascript程式碼組成，當然javascript程式碼是最重要的。

　　HTML程式碼：

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

1. div id=”gui”div>  
2. div id >> div id=”id=”id=”id=”
id
3. =” >>div>     div id”mountains1″id=”mountains1″id div>div id=”skyline”>

div

>

 

div

>  

　　HTML的結構非常簡單，也就是建構了一個canvas容器，我們會利用JS在這個容器中產生一個Canvas物件。看最後的JS程式碼你就會知道了。 　　CSS代碼： CSS Code複製內容到剪貼簿

1. #canvas-容器{ 背景: #000: #000url(bg.jpg); 高度：400px； >左：50%； 邊距: -200px 300px; 位置：絕對； 絕對； 上寬度：600px；  > } 畫布 { 遊標
: 
2. 十字線; >: 阻止; 職位：相對；  z 索引：3；    } 畫布：活動 { 遊標：十字線；   
十字線
3. ；    } #skyline { 
4. 背景: 背景: 重複-x 50% 0; 底部底部底部底部底部底部底部底部底部底部底部高度：135px； 左：0； 左：0； 。 >：絕對； 
5. 寬度：100%； ：100%； ：100%； >指數 } #mountains1 { 背景 (mountains1.png) 重複-x 40% 0; 底部底部底部底部底部底部：0；>高度：200px； 左：0； 
左
6. ：0； 。 >：絕對； 寬度：100%； ：100%； ：100%； >指數 } #mountains2 { 背景: 重複-x 30% 0; 底部底部底部底部底部底部：0；>高度
：
7. 250px； 左：0； 左：0； 。 >：絕對； 寬度：100%； ：100%； ：100%； >
指數 } 

#gui

 { 右右: 0; 位置：固定； 上方：0；  索引🎜> ：3；    }  

　　CSS程式碼沒什麼特別，主要也就定義一下背景色和邊框之類的。

　　接下來是最重要的Javascript程式碼。

　　Javascript程式碼：

JavaScript Code複製內容到剪貼簿

1. self.init = 函數(){       
2.     self.dt = 0;   
3.         self.oldTime = Date.now();   
4.         self.canvas = document.createElement('canvas');                   
5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container''canvas-container'
6. );            self.canvas.onselectstart = 函數() { 函數() { > >;   
7.         };   
8.   
9.         self.canvas.width = self.cw = 600;   
10.         self.canvas.height = self.ch = 400;       
11.   
12.         self.articles = [];       
13.         self.partCount = 30;   
14.         self.fireworks = [];       
15.         self.mx = self.cw/2;   
16.         self.my = self.ch/2;   
17.         self.currentHue = 170;   
18.         self.partSpeed = 5;   
19.         self.partSpeedVariance = 10;   
20.         self.partWind = 50;   
21.         self.partFriction = 5;   
22.         self.partGravity = 1;   
23.         self.hueMin = 150;   
24.         self.hueMax = 200;   
25.         self.fworkSpeed = 2;   
26.         self.fworkAccel = 4;   
27.         self.hueVariance = 30;   
28.         self.flickerDensity = 20;   
29.         self.showShockwave = false;   
30.         self.showTarget = true;   
31.         self.clearAlpha = 25;   
32.   
33.         self.canvasContainer.append(self.canvas);   
34.         self.ctx = self.canvas.getContext('2d');   
35.         self.ctx.lineCap = '圓形';   
36.         self.ctx.lineJoin = '圓形';   
37.         self.lineWidth = 1;   
38.         self.bindEvents();               
39.         self.canvasLoop();   
40.   
41.         self.canvas.onselectstart = 函數() { 函數() { > >;            }；  
42.   
43.     }；  

　　這段JS程式碼主要是往canvas容器中建構一個Canvas對象，並且對這個canvas對象的外觀以及動畫屬性作了初始化。

JavaScript Code複製內容到剪貼簿
1. var 粒子 = 函數(x, y, 色調){ (x, y, 色調){ (x, y, 🎜>.x = x; 這個.y = y; 這個.coordLast = >             {x: x, y: y},   
2.             {x: x, y: y},   
3.             {x: x, y: y}   
4.         ]； 
5. 這.angle = rand(0, 360); .angle = rand(0, 360); 這個這個<. friction=" 1 - self.partFriction/100; 這個.gravity = self.partGravity/2; 這個這個這個.brightness = rand(50, 80); 這個這個.decay = rand(10, 50)/1000; 這個這這.lineWidth = self.lineWidth;      };   
6.   
7.     Particle.prototype.update = 函數（索引）{ var（索引）{ var.angle * Math.PI / 180; var vx = Math.cos(弧度) * 這個這個.speed; var vy = Math.sin(弧度) * 這個.speed > 。重力; 這個.速度*= 這個.摩擦力； 這個. coordLast[2].x = 這.coordLast[1].x; 這.coordLast[2].y = 這個.coordLast[1].y; 這個.coordLast[1].x = 這個.coordLast[0].x; 這個.coordLast[1].y = 這.coordLast[0 ].y; 這個.coordLast[0].x = 這.x； 這個.x； >.coordLast[0].y = 這個.y; 這個.x = vx 這個.y = vy * self.dt; 這個.angle  = 這個.wind; 這個.alpha -= 這.decay; .decay; .decay; if.decay; if.decay; if.decay; if.decay; if.decay; if.decay; if. (!hitTest(0,0,self.cw,self.ch,這個.x-這個.radius，
這個
8. .y-
這個
9. .radius，
這個
10. .radius*2, 這個.radius*2, 這個.radius*2, 這個.radius*2, 這個.radius*2, 這個.radius*2) ||  這個.alpha              self.articles.splice(index, 1);                }                    };   
11.   
12.     Particle.prototype.draw = 函數(){ var -1);   
13.         self.ctx.beginPath();                 
        self.ctx.moveTo(Math.round(
14. 這.coordLast[coordRand].x),這個.coordLast[coordRand].x),o.coordLast[coordRand].y));            self.ctx.lineTo(Math.round(
15. 這。 .y));            self.ctx.closePath();                         self.ctx.tripStyle = 'hsla('
16. 這樣, 100%, '
17. 這個.亮度'%, '.alpha ')';            self.ctx.中風(); if(self.flicker) 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){   
18.                 self.ctx.beginPath();                    self.ctx.arc(Math.round(這這; .y), rand(這個.lineWidth,
這個
19. .lineWidth 3)/2, 0, Math.PI*2,
false
20. )  self.ctx.closePath(); var                  self.ctx.fillStyle = 'hsla('' , 100%, '這個.亮度'%, ' randpha🎜>'%, ' randpha; )';   
21.                 self.ctx.fill();                }                }        }；   某個JS程式碼的功能是實現煙火爆炸後的小顆粒的均勻性，從draw方法中可以看出，創建幾個隨機點，煙火顆粒就可以在這個範圍的隨機點中散落。 JavaScript 程式碼 將內容複製到剪切板
    1. var Firework = 函數(startX, startY, targetX, getget >.x = startX; 這個.y = startY; 這個. >這個.startY = startY; 這個.hitX = false .hitY = 假; 這個.coordLast =              {x: startX, y: startY},                {x: startX, y: startY},   
                {x: startX, y: startY}   
            ]； 
    3. 這
    .targetX = targetX; 
    4. .targetX = targetX; 
    .targetX = targetX; 
    5. .targetX = targetX; .targetX = targetX; 這個.speed = self.fworkSpeed; 這個.angle = Math.atan2(targetY - startY, targetX - startX); .shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); 這 .fworkAccel/100; 這個.hue = self.currentHue; 這這個.alpha = rand(50,100)/100; 這.lineWidth =.targetRadius = 1;        }；           Firework.prototype.update = 函數
    （索引）{   
            self.ctx.lineWidth = 
    7. 這
    .lineWidth;   
    8. .lineWidth;   
      
    9.         vx = Math.cos(這
    .angle) * 
    10. .angle) * 
    11. .angle) *          vy = Math.sin(這個.angle) * 
    .angle) * 
    12. 這個.angle) * 這這個🎜>這個🎜>這個.速度*= 1   這個.加速； 這個.coordLast[2].coordLast 這個.coordLast[1].x; 這個.coordLast[2].y = .coordLast[2].y = 這個.coordLast[1].y; 這.coordLast[1].x = 這個這.coordLast[1].y = 這.coordLast[0].y; 這個.coordLast[0].x = 這.x； 這個 0].y = 這個.y; if(self.showTarget){ (self.showTarget){ ifif (這個.targetRadius (這個.targetRadius 這個
    13. .targetRadius { 這.targetRadius = .25 * self.dt;                } 其他 { 這個.targetRadius = 1 *  
                }   
            } 
    15. 如果(這(這(這個(這個.這個.. >.targetX){ if(這.x   vx .x   vx 這這個.x = 這
    .targetX; 
    16. 這個.targetX; 這個。 hitX = true;   
    17.             } 
    其他
    18.  {              }            } 否則 { 如果這個> vx >= 這個.targetX){ 這個.x = 這個.x = 這個.x = 這個。 targetX; 
    19. 這.hitX = ;   ;   
    20. ;   
                } 
    21. 其他 {              }            } if(這(這(這個(這個.. >.targetY){ if(這.y   vy 
    。 .targetY){ 這個
    22. .y = 這.targetY; 這個.targetY; 這個.targetY; 
    這個
    23. 這個.targetY; 
    這個
    24. 。 hitY = true;                } 其他 {              }            } 否則 { 如果這個🎜>這個🎜> vy >= 這個.targetY){ 這個
    .y = 
    25. 這個.y = 這個.y = 這個. targetY； 這個
    26. .hitY = 這個
    27. ;   ;   ;   ;               } 其他 {              }            }如果(這.hitX && 這個這個var
    28. randExplosion = rand(0, 9);                self.createParticles(這a.色調）；                self.fireworks.splice(index, 1);            
            }   
        }；   
      
        Firework.prototype.draw = 
    32. 函數
    (){   
    33.         self.ctx.lineWidth = 這
    .lineWidth; 
    34. 這個.lineWidth; 這個.lineWidth; .lineWidth; > -1);                       
    35.         self.ctx.beginPath();                 
    36.         self.ctx.moveTo(Math.round(這.coordLast[coordRand].x),這個.coordLast[coordRand].x),o.coordLast[coordRand].y));   
            self.ctx.lineTo(Math.round(
    37. 這。 .y));            self.ctx.closePath();   
            self.ctx.tripStyle = 
    38. 'hsla('
    39. 這樣, 100%, '這個.亮度'%, '.alpha ')';            self.ctx.中風(); if(self.showTarget){ o>Target             self.ctx.save();   
    40.             self.ctx.beginPath();                self.ctx.arc(Math.round(
    這
    41. .targetX), Math🎜>這個
    .targetX), Math. .targetY), 
    42. 這個
    .targetRadius, 0, Math.PI*2, 
    43. false 🎜>false)               self.ctx.closePath();                self.ctx.lineWidth = 1;                self.ctx.中風();   
    44.             self.ctx.restore();   
    45.         } if(self.showShockwave){   
    46.             self.ctx.save();   
    47.             self.ctx.translate(Math.round(這個.             self.ctx.rotate(
    這
    48. .shockwaveAngle);   >這.shockwaveAngle);   
                self.ctx.beginPath();   
                self.ctx.arc(0, 0, 1*(
    50. 這.speed/5),50正確）；                self.ctx.strokeStyle = 'hsla('
    51. 'hsla(' 這個.亮度'%, ' 蘭特(25, 60) 100 ')';                self.ctx.lineWidth = 這個.lineWidth  
                self.ctx.中風();   
    52.             self.ctx.restore();   
            }                       
    53.     }；  
    某個JS程式碼是建立煙火實例的，我們也可以從draw方法中看出，當我們滑鼠點擊中部的某個點時，煙火發射的目的地就在那個點上。
    55. 這個HTML5 Canvas煙火效果的核心程式碼就是這樣，謝謝閱讀，希望能幫助大家，請繼續關注腳本之家，我們會努力分享更多優秀的文章。