DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 實例教程 HTML5 Canvas 超炫酷煙花綻放動畫實現代碼
實例教程 HTML5 Canvas 超炫酷煙花綻放動畫實現代碼
編輯：HTML5詳解     
這是一個很酷的HTML5 Canvas動畫，它將模擬的是我們現實生活中煙花綻放的動畫特效，效果非常逼真，下面我們來簡單分析一下實現這款Html5煙花特效的過程及代碼，主要由Html代碼、CSS代碼以及Javascript代碼組成，當然Javascript代碼是最重要的

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

　　下面我們來簡單分析一下實現這款Html5煙花特效的過程及代碼，主要由Html代碼、CSS代碼以及Javascript代碼組成，當然Javascript代碼是最重要的。

　　Html代碼：

XML/Html Code復制內容到剪貼板
  1. <div id=”gui”></div>  
  2. <div id=”canvas-container”> <div id=”Mountains2″></div>    
  3. <div id=”Mountains1″></div><div id=”skyline”></div> </div>  

　　Html的結構非常簡單，即構造了一個canvas容器，我們會利用JS在這個容器中生成一個Canvas對象。看最後的JS代碼你就會知道了。

　　CSS代碼：

CSS Code復制內容到剪貼板
  1. #canvas-container { background: #000 url(bg.jpg); height: 400px; left: 50%; margin: -200px 0 0 -300px; position: absolute; top: 50%; width: 600px; z-index: 2;   
  2. } canvas { cursor: crosshair; display: block; position: relative; z-index: 3;   
  3. } canvas:active { cursor: crosshair;   
  4. } #skyline { background: url(skyline.png) repeat-x 50% 0; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1;       
  5. } #mountains1 { background: url(Mountains1.png) repeat-x 40% 0; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1;       
  6. } #mountains2 { background: url(Mountains2.png) repeat-x 30% 0; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1;       
  7. } #gui { rightright: 0; position: fixed; top: 0; z-index: 3;   
  8. }  

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

　　接下來是最重要的Javascript代碼。

　　Javascript代碼：

JavaScript Code復制內容到剪貼板
  1. self.init = function(){       
  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');   
  6.         self.canvas.onselectstart = function() { return false;   
  7.         };   
  8.   
  9.         self.canvas.width = self.cw = 600;   
  10.         self.canvas.height = self.ch = 400;       
  11.   
  12.         self.particles = [];       
  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 = 'round';   
  36.         self.ctx.lineJoin = 'round';   
  37.         self.lineWidth = 1;   
  38.         self.bindEvents();               
  39.         self.canvasLoop();   
  40.   
  41.         self.canvas.onselectstart = function() { return false;   
  42.         };   
  43.   
  44.     };  

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

JavaScript Code復制內容到剪貼板
  1. var Particle = function(x, y, hue){ this.x = x; this.y = y; this.coordLast = [   
  2.             {x: x, y: y},   
  3.             {x: x, y: y},   
  4.             {x: x, y: y}   
  5.         ]; this.angle = rand(0, 360); this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)); this.friction = 1 - self.partFriction/100; this.gravity = self.partGravity/2; this.hue = rand(hue-self.hueVariance, hue+self.hueVariance); this.brightness = rand(50, 80); this.alpha = rand(40,100)/100; this.decay = rand(10, 50)/1000; this.wind = (rand(0, self.partWind) - (self.partWind/2))/25; this.lineWidth = self.lineWidth;   
  6.     };   
  7.   
  8.     Particle.prototype.update = function(index){ var radians = this.angle * Math.PI / 180; var vx = Math.cos(radians) * this.speed; var vy = Math.sin(radians) * this.speed + this.gravity; this.speed *= this.friction; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; this.x += vx * self.dt; this.y += vy * self.dt; this.angle += this.wind; this.alpha -= this.decay; if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2) || this.alpha < .05){                       
  9.             self.particles.splice(index, 1);       
  10.         }               
  11.     };   
  12.   
  13.     Particle.prototype.draw = function(){ var coordRand = (rand(1,3)-1);   
  14.         self.ctx.beginPath();                                   
  15.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
  16.         self.ctx.lineTo(Math.round(this.x), Math.round(this.y));   
  17.         self.ctx.closePath();                   
  18.         self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')';   
  19.         self.ctx.stroke(); if(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){   
  20.                 self.ctx.beginPath();   
  21.                 self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3)/2, 0, Math.PI*2, false)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;   
  22.                 self.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+randAlpha+')';   
  23.                 self.ctx.fill();   
  24.             }       
  25.         }   
  26.     };  

　　這段JS代碼的功能是實現煙花爆炸後的小顆粒的繪制，從draw方法中可以看出，創建幾個隨機點，煙花顆粒即可在這個范圍的隨機點中散落。

JavaScript Code復制內容到剪貼板
  1. var Firework = function(startX, startY, targetX, targetY){ this.x = startX; this.y = startY; this.startX = startX; this.startY = startY; this.hitX = false; this.hitY = false; this.coordLast = [   
  2.             {x: startX, y: startY},   
  3.             {x: startX, y: startY},   
  4.             {x: startX, y: startY}   
  5.         ]; this.targetX = targetX; this.targetY = targetY; this.speed = self.fworkSpeed; this.angle = Math.atan2(targetY - startY, targetX - startX); this.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)); this.acceleration = self.fworkAccel/100; this.hue = self.currentHue; this.brightness = rand(50, 80); this.alpha = rand(50,100)/100; this.lineWidth = self.lineWidth; this.targetRadius = 1;   
  6.     };   
  7.   
  8.     Firework.prototype.update = function(index){   
  9.         self.ctx.lineWidth = this.lineWidth;   
  10.   
  11.         vx = Math.cos(this.angle) * this.speed,   
  12.         vy = Math.sin(this.angle) * this.speed; this.speed *= 1 + this.acceleration; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; if(self.showTarget){ if(this.targetRadius < 8){ this.targetRadius += .25 * self.dt;   
  13.             } else { this.targetRadius = 1 * self.dt;       
  14.             }   
  15.         } if(this.startX >= this.targetX){ if(this.x + vx <= this.targetX){ this.x = this.targetX; this.hitX = true;   
  16.             } else { this.x += vx * self.dt;   
  17.             }   
  18.         } else { if(this.x + vx >= this.targetX){ this.x = this.targetX; this.hitX = true;   
  19.             } else { this.x += vx * self.dt;   
  20.             }   
  21.         } if(this.startY >= this.targetY){ if(this.y + vy <= this.targetY){ this.y = this.targetY; this.hitY = true;   
  22.             } else { this.y += vy * self.dt;   
  23.             }   
  24.         } else { if(this.y + vy >= this.targetY){ this.y = this.targetY; this.hitY = true;   
  25.             } else { this.y += vy * self.dt;   
  26.             }   
  27.         } if(this.hitX && this.hitY){ var randExplosion = rand(0, 9);   
  28.             self.createParticles(this.targetX, this.targetY, this.hue);   
  29.             self.Fireworks.splice(index, 1);                       
  30.         }   
  31.     };   
  32.   
  33.     Firework.prototype.draw = function(){   
  34.         self.ctx.lineWidth = this.lineWidth; var coordRand = (rand(1,3)-1);                       
  35.         self.ctx.beginPath();                               
  36.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
  37.         self.ctx.lineTo(Math.round(this.x), Math.round(this.y));   
  38.         self.ctx.closePath();   
  39.         self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')';   
  40.         self.ctx.stroke(); if(self.showTarget){   
  41.             self.ctx.save();   
  42.             self.ctx.beginPath();   
  43.             self.ctx.arc(Math.round(this.targetX), Math.round(this.targetY), this.targetRadius, 0, Math.PI*2, false)   
  44.             self.ctx.closePath();   
  45.             self.ctx.lineWidth = 1;   
  46.             self.ctx.stroke();   
  47.             self.ctx.restore();   
  48.         } if(self.showShockwave){   
  49.             self.ctx.save();   
  50.             self.ctx.translate(Math.round(this.x), Math.round(this.y));   
  51.             self.ctx.rotate(this.shockwaveAngle);   
  52.             self.ctx.beginPath();   
  53.             self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI, true);   
  54.             self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+rand(25, 60)/100+')';   
  55.             self.ctx.lineWidth = this.lineWidth;   
  56.             self.ctx.stroke();   
  57.             self.ctx.restore();   
  58.         }                                    
  59.     };  

　　這段JS代碼是創建煙花實例的，我們也可以從draw方法中看出，當我們鼠標點擊畫布中的某點時，煙花發射的目的地就在那個點上。

　　這款Html5 Canvas煙花效果的核心代碼就是這樣，謝謝閱讀，希望能幫到大家，請繼續關注，我們會努力分享更多優秀的文章。

HTML5詳解
用HTML5實現鼠標滾輪事件放大縮小圖片的功能
你我都知道在Html5網頁中添加鼠標滾輪事件能夠更好的讓用戶與網頁進行交互操作。而在Html5中，
基於HTML5的齒輪動畫特效
這是一個基於Html5的齒輪動畫特效，我們將齒輪轉動的物理學原理，轉換為Html5代碼，在網頁上實
html5隨機數的使用方法
為了提高動畫（特別是無代碼動畫）制作的靈活性，除了定時器，我們最近新增了隨機數的功能，本節教程將對

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
基於HTML5超酷攝像頭（HTML5 webcam）拍照功能實現代碼 html5指南-5.使用web storage存儲鍵值對的數據 簡單介紹HTML5中audio標簽的使用 使用HTML5的Canvas繪制曲線的簡單方法 百度，淘寶，騰訊三大巨頭HTML頁面規范分解 多視角3D可旋轉的HTML5 Logo動畫 HTML5技術教程：富媒體平台簡介 HTML5中如何顯示視頻呢 HTML5視頻播放demo 9款HTML5實現的超酷特效 用html5的canvas畫布繪制貝塞爾曲線完整代碼
熱門推薦
Bootstrap 學習分享 HTML5 form標簽之解放表單驗證、增加文件上傳、集成拖放的使用方法 HTML5緩存Cache Manifest實例講解 html5 Canvas畫圖教程(1)—畫圖的基本常識 HTML5技術教程：制作網頁游戲 用HTML5實現手機搖一搖的功能的教程 HTML5所有標簽匯總及標簽意義解釋 html5開發之viewport使用 10個為設計者准備的HTML5在線工具
大家都在看
跟我學習javascript的異步腳本加載 XML技術系列講座（7）通過DOM操作數據（上） html5及css3做的3D小房子 AJAX源碼應用示例2-解決AJAX返回中文亂碼問題 熟練設計師的七原則(1):字體設計 easyUI datagrid筆記 Node.js中創建和管理外部進程詳解 jquery miniui 教程 表格控件 合並單元格應用
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved