快過年了，用JS讓你的網(wǎng)頁放煙花吧
作者：佚名
這篇文章看完，保證你在任何平臺，用任何語言都可以寫出來放煙花的效果。
馬上就要過春節(jié)了，大城市里依然是不準(zhǔn)燃放煙花這種空氣污染的東西的，想念小時候在自家院子里放花的快樂時光，大城市里的小朋友們是體會不到這種快樂了。但作為前端工程師，這難不倒我們，下面就教大家如何用JS在網(wǎng)頁里放煙花。
在 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<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)在沒有動畫，一點也不像煙花。別著急，我們馬上就讓它們動起來。
動起來
動起來其實就是不斷的去繪制一個值從小變大的圓心半徑...能明白吧，不斷的繪制有兩種方法，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<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)在我們再給它加入一點煙霧拖尾的效果~
- 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<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);})();
責(zé)任編輯：龐桂玉
來源：
前端大全
