建站
咨詢
售后
建站咨詢
新聞中心
本篇文章給大家分享的是有關(guān)如何用JavaScript讓你的網(wǎng)頁放煙花，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到喀什網(wǎng)站設(shè)計與喀什網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋喀什地區(qū)。
馬上就要過春節(jié)了，大城市里依然是不準(zhǔn)燃放煙花這種空氣污染的東西的，想念小時候在自家院子里放花的快樂時光，大城市里的小朋友們是體會不到這種快樂了。但作為前端工程師，這難不倒我們，下面就教大家如何用JS在網(wǎng)頁里放煙花。
在 codepen 里搜索 “fireworks” 可以搜到各種使用JS完成的煙花效果。我今天分享的代碼，也是參考自其中一個。
這分代碼經(jīng)我修改后，已經(jīng)植入到“我愛掘金”的蝌蚪池塘中，只要發(fā)送“新年快樂”，“春節(jié)快樂”，就可以在池塘里放煙花了。
這篇文章看完，保證你在任何平臺，用任何語言都可以寫出來放煙花的效果。
如何實(shí)現(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í)
煙花都是從一個點(diǎn)爆炸，伴隨著不同的弧度散開，所以我們先繪制幾個小圓點(diǎn)，環(huán)繞著一個圓心。有點(diǎn)像loading的小圈圈。這其實(shí)就是煙花最開始的狀態(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)在沒有動畫，一點(diǎn)也不像煙花。別著急，我們馬上就讓它們動起來。
動起來
動起來其實(shí)就是不斷的去繪制一個值從小變大的圓心半徑...能明白吧，不斷的繪制有兩種方法，setInterval和requestAnimationFrame，兩種方法都可以。
setInterval
優(yōu)點(diǎn)：可以比較容易的設(shè)定動畫的繪制頻率。
var radius = 0;//圓心半徑 function fire(x,y){ function tick() { drawFireworks(x,y);//繪制煙花 radius++;//半徑不斷變大 } setInterval(tick,30);//每30毫秒繪制一次 }requestAnimationFrame
優(yōu)點(diǎn)：繪制頻率跟瀏覽器畫面的繪制同步。
var radius = 0; function fire(x,y){ function tick() { drawFireworks(x,y); radius++; requestAnimationFrame(tick); } tick(); }
是不是已經(jīng)有點(diǎn)感覺了?
更像煙花一點(diǎn)
但真實(shí)的煙花肯定不會這么聽話，規(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
很絢麗的對不對?現(xiàn)在我們再給它加入一點(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); }
為了更寫實(shí)，我們繼續(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ā)射。最后才是煙花...這些就交給大家自己去實(shí)現(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
以上就是如何用JavaScript讓你的網(wǎng)頁放煙花，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱：如何用JavaScript讓你的網(wǎng)頁放煙花
文章源于：http://www.dlmjj.cn/article/peodio.html
