小说网,盗墓笔记第二季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

快過(guò)年了，用JS讓你的網(wǎng)頁(yè)放煙花吧

馬上就要過(guò)春節(jié)了，大城市里依然是不準(zhǔn)燃放煙花這種空氣污染的東西的，想念小時(shí)候在自家院子里放花的快樂(lè)時(shí)光，大城市里的小朋友們是體會(huì)不到這種快樂(lè)了。但作為前端工程師，這難不倒我們，下面就教大家如何用JS在網(wǎng)頁(yè)里放煙花。

十多年的新沂網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整新沂建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“新沂網(wǎng)站設(shè)計(jì)”,“新沂網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

這篇文章看完，保證你在任何平臺(tái)，用任何語(yǔ)言都可以寫(xiě)出來(lái)放煙花的效果

如何實(shí)現(xiàn)的？

先創(chuàng)建一個(gè)Canvas

先新建一個(gè)和網(wǎng)頁(yè)可視區(qū)大小一樣的canvas，并且通過(guò)監(jiān)聽(tīng)顯示區(qū)的resize事件，來(lái)改變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í)

煙花都是從一個(gè)點(diǎn)爆炸，伴隨著不同的弧度散開(kāi)，所以我們先繪制幾個(gè)小圓點(diǎn)，環(huán)繞著一個(gè)圓心。有點(diǎn)像loading的小圈圈。這其實(shí)就是煙花最開(kāi)始的狀態(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
  
  
  
  
        var angle = 360/count*i;//煙花粒子角度 
  
  
  
          var radians = angle * Math.PI / 180;//煙花粒子弧度 
  
  
  
          var vx = sx+Math.cos(radians) * radius; 
  
  
  
          var vy = sy+Math.sin(radians) * radius; 
  
  
  
          var size = 2; 
  
  
  
          context.beginPath(); 
  
  
  
          context.arc(vx, vy, size, 0, Math.PI*2, false) 
  
  
  
          context.closePath(); 
  
  
  
          context.fillStyle = "#ff0000"; 
  
  
  
          context.fill(); 
  
  
  
      } 
  
  
  
  }
  
  
  
  document.addEventListener('mousedown', mouseDownHandler, false);

以上代碼的含義大家應(yīng)該都懂對(duì)不對(duì)？但現(xiàn)在沒(méi)有動(dòng)畫(huà)，一點(diǎn)也不像煙花。別著急，我們馬上就讓它們動(dòng)起來(lái)。

動(dòng)起來(lái)

動(dòng)起來(lái)其實(shí)就是不斷的去繪制一個(gè)值從小變大的圓心半徑...能明白吧，不斷的繪制有兩種方法，setInterval和requestAnimationFrame，兩種方法都可以。

1. setInterval

優(yōu)點(diǎn)：可以比較容易的設(shè)定動(dòng)畫(huà)的繪制頻率。

 
 
 
 
  
  
  
  var radius = 0;//圓心半徑 
  
  
  
  function fire(x,y){ 
  
  
  
      function tick() { 
  
  
  
          drawFireworks(x,y);//繪制煙花 
  
  
  
          radius++;//半徑不斷變大 
  
  
  
      } 
  
  
  
      setInterval(tick,30);//每30毫秒繪制一次 
  
  
  
  }

2. requestAnimationFrame

優(yōu)點(diǎn)：繪制頻率跟瀏覽器畫(huà)面的繪制同步。

 
 
 
 
  
  
  
  var radius = 0; 
  
  
  
  function fire(x,y){ 
  
  
  
      function tick() { 
  
  
  
          drawFireworks(x,y); 
  
  
  
          radius++; 
  
  
  
          requestAnimationFrame(tick); 
  
  
  
      } 
  
  
  
      tick();
  
  
  
  }

是不是已經(jīng)有點(diǎn)感覺(jué)了？

更像煙花一點(diǎn)

但真實(shí)的煙花肯定不會(huì)這么聽(tīng)話，規(guī)規(guī)矩矩的保持弧度和速度，所以我們要加入一些隨機(jī)因子。

 
 
 
 
  
  
  
  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
  
  
  
  
        var p = {}; 
  
  
  
          var angle = Math.floor(Math.random()*360); 
  
  
  
          p.radians = angle * Math.PI / 180; 
  
  
  
          p.radius = 0; 
  
  
  
          p.sx = sx; 
  
  
  
          p.sy = sy; 
  
  
  
          p.speed = (Math.random()*5)+.4; 
  
  
  
          p.size = Math.floor(Math.random()*3)+1; 
  
  
  
          p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance); 
  
  
  
          p.brightness = Math.floor(Math.random()*31)+50; 
  
  
  
          p.alpha = (Math.floor(Math.random()*61)+40)/100; 
  
  
  
          particles.push(p); 
  
  
  
      } 
  
  
  
  } 
  
  
  
  function drawFireworks() { 
  
  
  
      clearCanvas(); 
  
  
  
      for(var i = 0 ;i
  
  
  
  
        var p = particles[i]; 
  
  
  
          pp.vx = p.sx+Math.cos(p.radians) * p.radius; 
  
  
  
          pp.vy = p.sy+Math.sin(p.radians) * p.radius; 
  
  
  
          p.radius += 1+p.speed; 
  
  
  
          context.beginPath(); 
  
  
  
          context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false); 
  
  
  
          context.closePath(); 
  
  
  
          context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')'; 
  
  
  
          context.fill(); 
  
  
  
      } 
  
  
  
  }

很絢麗的對(duì)不對(duì)？現(xiàn)在我們?cè)俳o它加入一點(diǎ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); 
  
  
  
  }

為了更寫(xiě)實(shí)，我們繼續(xù)升級(jí)

現(xiàn)在加入一些重力的影響，讓煙花粒子的移動(dòng)速度越來(lái)越慢并且慢慢下落消失

 
 
 
 
  
  
  
  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)在這個(gè)煙花看起來(lái)是不是就很有煙花的感覺(jué)了，當(dāng)然各種參數(shù)你還可以更細(xì)致的加入一些變量。比如繪制一個(gè)炮竹，從炮竹處向天空發(fā)射。最后才是煙花...這些就交給大家自己去實(shí)現(xiàn)吧。

在任意網(wǎng)頁(yè)上放煙花

在Chrome里新建一個(gè)書(shū)簽，復(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

網(wǎng)站題目：快過(guò)年了，用JS讓你的網(wǎng)頁(yè)放煙花吧
文章網(wǎng)址：http://www.fisionsoft.com.cn/article/ccdddcc.html

新聞中心

其他資訊