本篇文章給大家分享的是有關(guān)如何用JavaScript讓你的網(wǎng)頁(yè)放煙花，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到喀什網(wǎng)站設(shè)計(jì)與喀什網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋喀什地區(qū)。

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

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

這分代碼經(jīng)我修改后，已經(jīng)植入到“我愛(ài)掘金”的蝌蚪池塘中，只要發(fā)送“新年快樂(lè)”，“春節(jié)快樂(lè)”，就可以在池塘里放煙花了。

這篇文章看完，保證你在任何平臺(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<count;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，兩種方法都可以。

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毫秒繪制一次 }

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<count;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<particles.length;i++){         var p = particles[i];          p.vx = p.sx+Math.cos(p.radians) * p.radius;         p.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<count;i++){var p = {};var angle = Math.floor(Math.random()*360);p.radians = angle * Math.PI / 180;p.x = sx;p.y = sy;p.speed = (Math.random()*5)+.4;p.radius = p.speed;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<particles.length;i++){var p = particles[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;context.beginPath();context.arc(p.x, p.y, p.size, 0, Math.PI*2, false);context.closePath();context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';context.fill();}}document.addEventListener('mousedown', mouseDownHandler, false);})();

以上就是如何用JavaScript讓你的網(wǎng)頁(yè)放煙花，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：如何用JavaScript讓你的網(wǎng)頁(yè)放煙花
文章源于：http://jinyejixie.com/article0/peodio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、商城網(wǎng)站、網(wǎng)站收錄、靜態(tài)網(wǎng)站、電子商務(wù)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)