這篇文章主要講解了“如何用JS讓網(wǎng)頁放煙花”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何用JS讓網(wǎng)頁放煙花”吧！

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信小程序開發(fā)、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

在 codepen 里搜索 “fireworks” 可以搜到各種使用JS完成的煙花效果。我今天分享的代碼，也是參考自其中一個。

這篇文章看完，保證你在任何平臺，用任何語言都可以寫出來放煙花的效果

如何實現(xiàn)的？

先創(chuàng)建一個Canvas

先新建一個和網(wǎng)頁可視區(qū)大小一樣的canvas，并且通過監(jiān)聽顯示區(qū)的resize事件，來改變canvas的大小。

var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  function resizeCanvas() {      canvas.width = window.innerWidth;      canvas.height = window.innerHeight;  }  function clearCanvas(){   context.fillStyle = '#ffffff';   context.fillRect(0,0,canvas.width, canvas.height);  }  window.addEventListener('resize', resizeCanvas, false);  resizeCanvas();

放煙花之前的練習(xí)

煙花都是從一個點爆炸，伴隨著不同的弧度散開，所以我們先繪制幾個小圓點，環(huán)繞著一個圓心。有點像loading的小圈圈。這其實就是煙花最開始的狀態(tài)...

function mouseDownHandler(e) {      var x = e.clientX;      var y = e.clientY;      drawFireworks(x,y);  } function drawFireworks(sx,sy) {      var count = 10;//煙花粒子數(shù)量      var radius = 10;//煙花環(huán)繞半徑      for(var i = 0 ;i
以上代碼的含義大家應(yīng)該都懂對不對？但現(xiàn)在沒有動畫，一點也不像煙花。別著急，我們馬上就讓它們動起來。
動起來
動起來其實就是不斷的去繪制一個值從小變大的圓心半徑...能明白吧，不斷的繪制有兩種方法，setInterval和requestAnimationFrame，兩種方法都可以。
    1.  setInterval
優(yōu)點：可以比較容易的設(shè)定動畫的繪制頻率。
var radius = 0;//圓心半徑  function fire(x,y){      function tick() {          drawFireworks(x,y);//繪制煙花          radius++;//半徑不斷變大      }      setInterval(tick,30);//每30毫秒繪制一次  }
  2.  requestAnimationFrame
優(yōu)點：繪制頻率跟瀏覽器畫面的繪制同步。
var radius = 0;  function fire(x,y){      function tick() {          drawFireworks(x,y);          radius++;          requestAnimationFrame(tick);      }      tick(); }
是不是已經(jīng)有點感覺了？
更像煙花一點
但真實的煙花肯定不會這么聽話，規(guī)規(guī)矩矩的保持弧度和速度，所以我們要加入一些隨機因子。
var rid;  function fire(x,y){      createFireworks(x,y);      function tick() {          drawFireworks();          rid=requestAnimationFrame(tick);      }      cancelAnimationFrame(rid);     tick();  }  var particles=[];  function createFireworks(sx,sy){      particles=[];      var hue = Math.floor(Math.random()*51)+150;      var hueVariance = 30;      var count = 100;      for(var i = 0 ;i
很絢麗的對不對？現(xiàn)在我們再給它加入一點煙霧拖尾的效果~
function tick() {   //tips:注意新加入的這4行代碼   context.globalCompositeOperation = 'destination-out';   context.fillStyle = 'rgba(0,0,0,'+10/100+')';   context.fillRect(0,0,canvas.width,canvas.height);   context.globalCompositeOperation = 'lighter';   //tipsend   drawFireworks();   rid=requestAnimationFrame(tick);  }
為了更寫實，我們繼續(xù)升級
現(xiàn)在加入一些重力的影響，讓煙花粒子的移動速度越來越慢并且慢慢下落消失
var vx = Math.cos(p.radians) * p.radius;  var vy = Math.sin(p.radians) * p.radius + 0.4;  p.x += vx;  p.y += vy;  p.radius *= 1 - p.speed/100;  p.alpha -= 0.005;
現(xiàn)在這個煙花看起來是不是就很有煙花的感覺了，當(dāng)然各種參數(shù)你還可以更細(xì)致的加入一些變量。比如繪制一個炮竹，從炮竹處向天空發(fā)射。最后才是煙花...這些就交給大家自己去實現(xiàn)吧。
在任意網(wǎng)頁上放煙花
在Chrome里新建一個書簽，復(fù)制以下代碼，粘貼到網(wǎng)址一欄，然后保存。
javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i
感謝各位的閱讀，以上就是“如何用JS讓網(wǎng)頁放煙花”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何用JS讓網(wǎng)頁放煙花這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
            
            
                        

            網(wǎng)頁標(biāo)題：如何用JS讓網(wǎng)頁放煙花            

            本文路徑：http://weahome.cn/article/jsoese.html