摘要：好看漂亮的網頁特效學習筆記猜猜下一個顏色是什么分步詳細解釋第一步很簡單的初始化函數。繪制新的火焰紅色的圓以及火花之前元素，即新的火焰紅色的圓以及火花的生命周期未完的話，就繼續更新它，否則就刪除它第五步以火焰為粒子。

逼真的火焰跟隨鼠標，還冒出火花，照亮背景文字

使用canvas繪制

使用javascript，但并無復雜邏輯。上手程度：簡單

歡迎來我的博客看此文章： https://clatterrr.com/archive...

演示地址:https://clatterrr.github.io/f...

源碼已在下方給出,或者訪問github代碼倉庫https://github.com/clatterrr/...

在上一篇中已講過。好看漂亮的html5網頁特效學習筆記(3)_猜猜下一個顏色是什么？
javascript分步詳細解釋

很簡單的初始化函數。

var oCanvas;
init = function()
{
 
    oCanvas = new Fire();
    oCanvas.run();
}
window.onload = init;

初始化canvas，定義各種基礎的東西，以及為鼠標添加事件監測。addEventListener第三個參數的意思是，若為false，則為事件處理順序為先進先處理，為true則為先進后處理。具體請看https://www.runoob.com/jsref/...

    var Fire  = function(){
 
    this.canvas         = document.getElementById("fire");
    this.ctx             = this.canvas.getContext("2d");
    this.canvas.height     = window.innerHeight;
    this.canvas.width     = window.innerWidth;
 
    this.aFires         = [];
    this.aSpark         = [];
    this.aSpark2         = [];
 
    this.mouse = {
        x : this.canvas.width * .5,
        y : this.canvas.height * .75,
    }
    //一旦鼠標移動，就更新this.mouse.x和this.mouse.y，因為設置了false，所以先進來的事件先處理
    this.canvas.addEventListener("mousemove", this.updateMouse.bind( this ), false);
}
Fire.prototype.updateMouse = function( e ){
    this.mouse.x = e.clientX;
    this.mouse.y = e.clientY;
}

使用requestAnimationFrame使下一幀重新運行一遍run函數。為什么不用setInterval呢？因為內在運行機制會讓它運行速度隨機器性能變化而變化，導致時間控制不精確。而requestAnimationFrame使用系統時間，保證每秒執行60次。參考：https://www.cnblogs.com/xiaoh...

并用bind()方法創建一個新的函數，在bind()被調用時，這個新函數的this被bind的第一個參數指定，其余的參數將作為新函數的參數供調用時使用。參考：https://developer.mozilla.org...

Fire.prototype.run = function(){
    //重新新繪制火焰和火花
    this.update();
    this.draw();
    //穩定重繪畫面
    requestAnimationFrame( this.run.bind( this ) );
}

重新繪制一個火焰（實際上是紅色的圓）和兩個火花（實際上是小長方形）。若有火焰或火花的生命周期完了，那么就用刪除它。否則繼續更新它。
注意火焰火花原本被存儲在數組里，所以刪除用slice就好了。

Fire.prototype.update = function(){
 
    //繪制新的火焰（紅色的圓）以及火花
    this.aFires.push( new Flame( this.mouse ) );
    this.aSpark.push( new Spark( this.mouse ) );
    this.aSpark2.push( new Spark( this.mouse ) );
   //之前元素，即新的火焰（紅色的圓）以及火花的生命周期未完的話，就繼續更新它，否則就刪除它
    for (var i = this.aFires.length - 1; i >= 0; i--) {
        if( this.aFires[i].alive )
            this.aFires[i].update();
        else
            this.aFires.splice( i, 1 );
    }
    for (var i = this.aSpark.length - 1; i >= 0; i--) {
        if( this.aSpark[i].alive )
            this.aSpark[i].update();
        else
            this.aSpark.splice( i, 1 );
    }
    for (var i = this.aSpark2.length - 1; i >= 0; i--) {
        if( this.aSpark2[i].alive )
            this.aSpark2[i].update();
        else
            this.aSpark2.splice( i, 1 );
    }
}

以火焰為粒子。部分注釋在代碼中。先使用構造函數確定火焰的各項參數。若火焰被更新，那么就更新它的坐標，生命周期，以及用生命周期計算顏色。這里的顏色使用的是HSLA顏色，參考：http://caibaojian.com/css3/va...。
火花的構造參數和更新參數也是一樣的。

var Flame = function( mouse ){
 
    //鼠標坐標
    this.cx = mouse.x;
    this.cy = mouse.y;
    
    //隨機在鼠標周圍產生
    this.x = rand( this.cx - 25, this.cx + 25);
    this.y = rand( this.cy - 5, this.cy + 5);
    
    //隨機變量，橫軸縱軸以及半徑的變化
    this.vy = rand( 1, 3 );
    this.vx = rand( -1, 1 );
    this.r = rand( 20, 30 );
    
    //生命周期
    this.life = rand( 3, 6 );
    this.alive = true;
    //用于繪制火焰顏色
    this.c = {
        h : Math.floor( rand( 2, 40) ),
        s : 100,
        l : rand( 80, 100 ),
        a : 0,
        ta : rand( 0.8, 0.9 )
    }
}
 
Flame.prototype.update = function()
{
    //y坐標變化
    this.y -= this.vy;
    this.vy += 0.05;
   
    //x坐標變化
    this.x += this.vx;
    if( this.x < this.cx )
        this.vx += 0.1;
    else
        this.vx -= 0.1;
    
    //半徑變化
    if(  this.r > 0 )
        this.r -= 0.1;
    if(  this.r <= 0 )
        this.r = 0;
 
 
    //計算生命周期，根據生命周期計算火焰顏色
    this.life -= 0.15;
    if( this.life <= 0 ){
        this.c.a -= 0.05;
        if( this.c.a <= 0 )
            this.alive = false;
    }else if( this.life > 0 && this.c.a < this.c.ta ){
        this.c.a += .08;
    }
 
}

canvas的主場，繪制背景，包括黑色背景，文字FIRE，以及一個跟隨在火焰后的暗紅色大圓。這個大圓大圓，更像是墻壁的上的投影，需要仔細一點才能發現。canvas參考https://www.w3school.com.cn/t...，自己一個函數一個函數慢慢去查才能加深印象。
注意globalCompositeOperation的參數soft-light和color-dodge似乎國內網站都沒找到解釋，只在英文mdn上看到了樣例。參考：
https://developer.mozilla.org...

Fire.prototype.draw = function(){
 
    //繪制背景
    this.ctx.globalCompositeOperation = "source-over";
    this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";
    this.ctx.fillRect( 0, 0, window.innerWidth, window.innerHeight );
    
    //定義漸變顏色樣式
    this.grd = this.ctx.createRadialGradient( this.mouse.x, this.mouse.y - 200,200,this.mouse.x, this.mouse.y - 100,0 );
    this.grd.addColorStop(0,"rgb( 15, 5, 2 )");
    this.grd.addColorStop(1,"rgb( 30, 10, 2 )");
    
    //繪制一個圓形，并使用顏色漸變樣式。這個圓是一個暗紅色的大圓
    //跟隨在火焰后的大圓，更像是墻壁的上的投影，需要仔細一點才能發現
    this.ctx.beginPath();
    this.ctx.arc( this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI );
    this.ctx.fillStyle= this.grd;
    this.ctx.fill();
    
    //繪制文字Fire
    this.ctx.font = "15em Amatic SC";
    this.ctx.textAlign = "center";
    this.ctx.strokeStyle = "rgb(50, 20, 0)";
    this.ctx.fillStyle = "rgb(120, 10, 0)";
    this.ctx.lineWidth = 2;
    this.ctx.strokeText("Fire",this.canvas.width/2, this.canvas.height * .72 );
    this.ctx.fillText("Fire",this.canvas.width/2, this.canvas.height * .72 );    
    
    //繪制火焰
    this.ctx.globalCompositeOperation = "overlay";
    for (var i = this.aFires.length - 1; i >= 0; i--)this.aFires[i].draw( this.ctx );
    
    //繪制粒子
    this.ctx.globalCompositeOperation = "soft-light";
    for (var i = this.aSpark.length - 1; i >= 0; i--)
    if( ( i % 2 ) === 0 )
            this.aSpark[i].draw( this.ctx );
 
    //繪制粒子2
    this.ctx.globalCompositeOperation = "color-dodge";
    for (var i = this.aSpark2.length - 1; i >= 0; i--) this.aSpark2[i].draw( this.ctx );
}

最關鍵但也很簡單的地方，就是真正的繪制火焰和火花啦。beginpath(),arc(),fillstyle()和fill()都是canvas的方法。慢慢查找資料吧。只是注意這兒的顏色用的是hsla顏色而不是rgba顏色哦。

 
Flame.prototype.draw = function( ctx ){
 
    ctx.beginPath();
    ctx.arc( this.x, this.y, this.r * 3, 0, 2*Math.PI );
    ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a/20) + ")";
    ctx.fill();
 
    ctx.beginPath();
    ctx.arc( this.x, this.y, this.r, 0, 2*Math.PI );
    ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")";
    ctx.fill();
 
}