這篇文章主要講解了“如何用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完成的煙花效果。我今天分享的代碼,也是參考自其中一個(gè)。
這篇文章看完,保證你在任何平臺,用任何語言都可以寫出來放煙花的效果
如何實(shí)現(xiàn)的?
先創(chuàng)建一個(gè)Canvas
先新建一個(gè)和網(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í)
煙花都是從一個(gè)點(diǎn)爆炸,伴隨著不同的弧度散開,所以我們先繪制幾個(gè)小圓點(diǎn),環(huán)繞著一個(gè)圓心。有點(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<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)該都懂對不對?但現(xiàn)在沒有動畫,一點(diǎn)也不像煙花。別著急,我們馬上就讓它們動起來。
動起來
動起來其實(shí)就是不斷的去繪制一個(gè)值從小變大的圓心半徑...能明白吧,不斷的繪制有兩種方法,setInterval和requestAnimationFrame,兩種方法都可以。
1. setInterval
優(yōu)點(diǎn):可以比較容易的設(shè)定動畫的繪制頻率。
var radius = 0;//圓心半徑 function fire(x,y){ function tick() { drawFireworks(x,y);//繪制煙花 radius++;//半徑不斷變大 } setInterval(tick,30);//每30毫秒繪制一次 }
2. 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<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]; 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(); } }
很絢麗的對不對?現(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)在這個(gè)煙花看起來是不是就很有煙花的感覺了,當(dāng)然各種參數(shù)你還可以更細(xì)致的加入一些變量。比如繪制一個(gè)炮竹,從炮竹處向天空發(fā)射。最后才是煙花...這些就交給大家自己去實(shí)現(xiàn)吧。
在任意網(wǎng)頁上放煙花
在Chrome里新建一個(gè)書簽,復(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;pp.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);})();
感謝各位的閱讀,以上就是“如何用JS讓網(wǎng)頁放煙花”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對如何用JS讓網(wǎng)頁放煙花這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
網(wǎng)站題目:如何用JS讓網(wǎng)頁放煙花
網(wǎng)址分享:http://www.muchs.cn/article34/jsoese.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、標(biāo)簽優(yōu)化、企業(yè)建站、外貿(mào)建站、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)