技術標籤：工作學習web前端開發前端程式設計程式設計師JavaScript

如何實現的？

我自己是一名從事了多年開發的web前端老程式設計師，前段時間我花了一個月整理了一份最適合學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以新增下面的QQ群，即可免費獲取。

先建立一個Canvas
先新建一個和網頁可視區大小一樣的canvas，並且通過監聽顯示區的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();

放煙花之前的練習

function mouseDownHandler(e) {
    var x = e.clientX;
    var y = e.clientY;

    drawFireworks(x,y);
}

function drawFireworks(sx,sy) {
    var count = 10;//煙花粒子數量
    var radius = 10;//煙花環繞半徑

    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);

以上程式碼的含義大家應該都懂對不對？但現在沒有動畫，一點也不像煙花。彆著急，我們馬上就讓它們動起來。
動起來
動起來其實就是不斷的去繪製一個值從小變大的圓心半徑…能明白吧，不斷的繪製有兩種方法，setInterval和requestAnimationFrame，兩種方法都可以。

setInterval
優點：可以比較容易的設定動畫的繪製頻率。

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

requestAnimationFrame
優點：繪製頻率跟瀏覽器畫面的繪製同步。

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

是不是已經有點感覺了？

更像煙花一點
但真實的煙花肯定不會這麼聽話，規規矩矩的保持弧度和速度，所以我們要加入一些隨機因子。

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();
    }
}

很絢麗的對不對？現在我們再給它加入一點菸霧拖尾的效果~

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);

為了更寫實，我們繼續升級

現在加入一些重力的影響，讓煙花粒子的移動速度越來越慢並且慢慢下落消失

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;
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113152605816.gif#pic_center)
現在這個煙花看起來是不是就很有煙花的感覺了，當然各種引數你還可以更細緻的加入一些變數。比如繪製一個炮竹，從炮竹處向天空發射。最後才是煙花...這些就交給大家自己去實現吧。

在任意網頁上放煙花
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113152647766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pZRFgxODk4NDAwMzgwNg==,size_16,color_FFFFFF,t_70)

在Chrome裡新建一個書籤，複製以下程式碼，貼上到網址一欄，然後儲存。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113152717700.gif#pic_center)