詳解使用HTML5 Canvas建立動態粒子網格動畫的範例程式碼分享

本篇文章主要介紹了使用HTML5 Canvas創建動態粒子網格動畫，非常具有實用價值，需要的朋友可以參考下。

最近看到一個粒子網格動畫挺炫的，自己也就做了一個，當背景挺不錯的。 CSDN不能上傳超過2M的圖片，所以就簡單截了一個靜態圖片：

下面就開始說怎麼實現這個效果吧：

首先當然是增加一個canvas了：

<canvas id="canvas"></canvas>

下面是樣式：

<style>
    #canvas{
        position: absolute;
        display: block;
        left:0;
        top:0;
        background: #0f0f0f;
        z-index: -1;
     }
</style>

上面canvas的z-index: -1的作用是可以放在一些元素的下面當做背景。

為了確保canvas能夠充滿整個瀏覽器，所以要將canvas的寬高設定成和瀏覽器一樣：

function getSize(){
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
}

上面w和h分別代表瀏覽器的寬高。

得到了瀏覽器的寬高，接下來就是在裡面畫粒子了，這裡我們需要事先定義一些粒子的參數：

var opt = {
    particleAmount: 50,         //粒子个数
    defaultSpeed: 1,            //粒子运动速度
    variantSpeed: 1,            //粒子运动速度的变量
    particleColor: "rgb(32,245,245)",       //粒子的颜色
    lineColor:"rgb(32,245,245)",            //网格连线的颜色
    defaultRadius: 2,           //粒子半径
    variantRadius: 2,           //粒子半径的变量
    minDistance: 200            //粒子之间连线的最小距离
};

上面的速度變數和半徑變數都是為了保證粒子的大小和速度不是一模一樣。

然後我們再建立一個類別用來初始化粒子，程式碼比較長，我都加了註解：

function Partical(){
    this.x = Math.random()*w;           //粒子的x轴坐标
    this.y = Math.random()*h;           //粒子的y轴坐标
    this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random();     //粒子的运动速度
    this.directionAngle = Math.floor(Math.random()*360);                //粒子运动的方向
    this.color = opt.particleColor ;                                    //粒子的颜色
    this.radius = opt.defaultRadius+Math.random()*opt.variantRadius;    //粒子的半径大小
    this.vector = {
        x:this.speed * Math.cos(this.directionAngle),       //粒子在x轴的速度
        y:this.speed * Math.sin(this.directionAngle)        //粒子在y轴的速度
    }
    this.update = function(){                   //粒子的更新函数
        this.border();                           //判断粒子是否到了边界
        this.x += this.vector.x;                //粒子下一时刻在x轴的坐标
        this.y += this.vector.y;                //粒子下一时刻在y轴的坐标
    }
    this.border = function(){               //判断粒子是都到达边界
        if(this.x >= w || this.x<= 0){      //如果到达左右边界，就让x轴的速度变为原来的负数
            this.vector.x *= -1;
        }
        if(this.y >= h || this.y <= 0){     //如果到达上下边界，就让y轴的速度变为原来的负数
            this.vector.y *= -1;
        }
        if(this.x > w){                     //下面是改变浏览器窗口大小时的操作，改变窗口大小后有的粒子会被隐藏，让他显示出来即可
            this.x = w;
        }
        if(this.y > h){
            this.y = h;
        }
        if(this.x < 0){
            this.x = 0;
        }
        if(this.y < 0){
            this.y = 0;
        }
    }
    this.draw = function(){                 //绘制粒子的函数
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

1、每個粒子的初始速度和角度是隨機產生的，粒子的顏色透過相關的設定選項來決定。

2、this.vector用來儲存粒子的移動方向：如果this.vector.x為1，則粒子向右運動；如果是-1，則粒子向左移動。同樣，如果this.vector.y為負，則粒子向上移動，如果為正，則粒子向下移動。

this.update用來更新每個粒子下一個位置的座標。首先，進行邊緣檢測；如果粒子的移動超出了canvas的尺寸，則將方向向量乘以-1產生反向的運動方向。

3、視窗縮放可能會造成粒子超出邊界，如此一來邊緣偵測函數就捕捉不到了，所以就需要一系列的if語句來偵測這種情況，將粒子的位置重置為當前canvas的邊界。

4、最後一步，將這些點畫到畫布上。

粒子的類別已經寫好了，下面就把他繪製出來：

function init(){
   getSize();
   for(let i = 0;i<opt.particleAmount; i++){
        particle.push(new Partical());
   }
   loop();
}

上面初始化了opt.particleAmount個粒子物件，初始化了物件但是並沒有繪製出來，下面是loop函數：

function loop(){
    ctx.clearRect(0,0,w,h);
    for(let i = 0;i<particle.length; i++){
        particle[i].update();
        particle[i].draw();
    }
    window.requestAnimationFrame(loop);
}

loop()函數每執行一次，都會清除canvas上的內容，然後透過粒子物件的update()函數重新計算粒子的座標，最後透過粒子物件的draw()函數來繪製粒子。下面是這個時候的效果：

但是在瀏覽器視窗大小改變以後有些粒子就會消失不見，這個時候需要添加一個事件來監聽瀏覽器大小是否改變：

window.addEventListener("resize",function(){
    winResize()
},false);

然後需要來寫winResize()函數，這裡需要注意一下，瀏覽器改變的時候觸發resize事件的次數會特別頻繁，稍微移動一下瀏覽器的邊緣就是觸發幾十次resize事件，那麼也就會重新計算幾十次瀏覽器大小，比較消耗性能，這個大家可以測試一下，這裡就直接說解決方法吧，其實我們要的只是瀏覽器改變後的最後的大小，至於中間到底改變了多少次和我們沒有關係，所以我們可以在瀏覽器視窗改變的時候延緩200毫秒後執行計算瀏覽器大小的事件，如果在這段期間一直觸發resize事件，那就一直往後延緩200毫秒，聽起來挺複雜，其實程式碼很簡單：

var particle = [], w,h;     //粒子数组，浏览器宽高
var delay = 200,tid;        //延缓执行事件和setTimeout事件引用
function winResize(){
    clearTimeout(tid);
    tid = setTimeout(function(){
        getSize();          //获取浏览器宽高，在文章最上面有介绍
    },delay)
}

這樣所有的粒子動畫都完成了，接下來就可以在粒子之間畫線了，我們上面定義的opt物件裡面有一個minDistance變量，當兩個粒子之間的連線小於這個值的時候，我們就會給他們之間畫上線。

那麼如何計算兩個粒子之間的距離呢，大家可以回想一下國中數學第一課，勾股定理，直角三角形兩個直角邊的平方和等於第三條變的平方，看下面：

我們現在知道每個粒子的x軸和y軸的座標，那麼我們就可以計算出兩個點之間的距離了，寫一個函數，傳入兩點，如下：

function getDistance(point1,point2){
        return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
    }

现在我们可以计算出两个点的距离，那么我们就计算出所有每个粒子同其他所有粒子的距离，来确定它们之间是否需要连线，当然如果所有粒子的颜色深度都一模一样，那就有点丑了，所以我们这里可以根据两个粒子之间的距离来决定连线的透明度，两个粒子距离越近，越不透明，距离越远，越透明，超过一定距离就不显示了。

function linePoint(point,hub){
    for(let i = 0;i<hub.length;i++){
        let distance = getDistance(point,hub[i]);
        let opacity = 1 -distance/opt.minDistance;
        if(opacity > 0){
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = "rgba("+line[0]+","+line[1]+","+line[2]+","+opacity+")";
            ctx.beginPath();
            ctx.moveTo(point.x,point.y);
            ctx.lineTo(hub[i].x,hub[i].y);
            ctx.closePath();
            ctx.stroke();
        }
    }
}

上面传入的两个参数分别是一个点和整个点的数组，let opacity = 1 -distance/opt.minDistance;用于判断连线之间的透明度同时也判断了距离，距离大于opt.minDistance时，opacity为负，下面判断时就过滤掉了，上面的颜色用到了正则表达式，需要先解析最上面opt对象里给出的颜色，然后再加上透明度，这段代码如下：

var line = opt.lineColor.match(/\d+/g);

最后在loop()函数里面不断循环计算距离就可以了，在loop()中加入代码后如下：

function loop(){
        ctx.clearRect(0,0,w,h);
        for(let i = 0;i<particle.length; i++){
            particle[i].update();
            particle[i].draw();
        }
        for(let i = 0;i<particle.length; i++){   //添加的是这个循环
            linePoint(particle[i],particle)
        }
        window.requestAnimationFrame(loop);
    }

需要指出的是：如果添加过多的点和/或过多的连接距离（连接距离会创建过多的线条），动画也会扛不住。当视口变窄时最好降低粒子的运动速度：粒子的尺寸越小，在愈加狭窄空间内的移动速度貌似会越快。

显示整段代码：

    
    
    


<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var opt = {
        particleAmount: 50,     //粒子个数
        defaultSpeed: 1,        //粒子运动速度
        variantSpeed: 1,        //粒子运动速度的变量
        particleColor: "rgb(32,245,245)",       //粒子的颜色
        lineColor:"rgb(32,245,245)",            //网格连线的颜色
        defaultRadius: 2,           //粒子半径
        variantRadius: 2,           //粒子半径的变量
        minDistance: 200            //粒子之间连线的最小距离
    };
    var line = opt.lineColor.match(/\d+/g);
    console.log(line);
    var particle = [], w,h;
    var delay = 200,tid;
    init();
    window.addEventListener("resize",function(){
        winResize()
    },false);

    function winResize(){
        clearTimeout(tid);
        tid = setTimeout(function(){
            getSize();
        },delay)
    }

    function init(){
        getSize();
        for(let i = 0;i<opt.particleAmount; i++){
            particle.push(new Partical());
        }
        loop();
    }

    function loop(){
        ctx.clearRect(0,0,w,h);
        for(let i = 0;i<particle.length; i++){
            particle[i].update();
            particle[i].draw();
        }
        for(let i = 0;i<particle.length; i++){
            linePoint(particle[i],particle)
        }
        window.requestAnimationFrame(loop);
    }

    function linePoint(point,hub){
        for(let i = 0;i<hub.length;i++){
            let distance = getDistance(point,hub[i]);
            let opacity = 1 -distance/opt.minDistance;
            if(opacity > 0){
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "rgba("+line[0]+","+line[1]+","+line[2]+","+opacity+")";
                ctx.beginPath();
                ctx.moveTo(point.x,point.y);
                ctx.lineTo(hub[i].x,hub[i].y);
                ctx.closePath();
                ctx.stroke();
            }
        }
    }

    function getDistance(point1,point2){
        return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
    }

    function getSize(){
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    }
    function Partical(){
        this.x = Math.random()*w;           
        //粒子的x轴坐标
        this.y = Math.random()*h;           
        //粒子的y轴坐标
        this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random();     
        //粒子的运动速度
        this.directionAngle = Math.floor(Math.random()*360);                
        //粒子运动的方向
        this.color = opt.particleColor ;                                    
        //粒子的颜色
        this.radius = opt.defaultRadius+Math.random()*opt.variantRadius;    
        //粒子的半径大小
        this.vector = {
        
            x:this.speed * Math.cos(this.directionAngle),       
            //粒子在x轴的速度
            y:this.speed * Math.sin(this.directionAngle)        
            //粒子在y轴的速度
        }
        this.update = function(){                   
        //粒子的更新函数
            this.border();                           
            //判断粒子是否到了边界
            this.x += this.vector.x;                
            //粒子下一时刻在x轴的坐标
            this.y += this.vector.y;                
            //粒子下一时刻在y轴的坐标
        }
        this.border = function(){               
        //判断粒子是都到达边界
            if(this.x >= w || this.x<= 0){      
            //如果到达左右边界，就让x轴的速度变为原来的负数
                this.vector.x *= -1;
            }
            if(this.y >= h || this.y <= 0){     
            //如果到达上下边界，就让y轴的速度变为原来的负数
                this.vector.y *= -1;
            }
            if(this.x > w){                     
            //下面是改变浏览器窗口大小时的操作，改变窗口大小后有的粒子会被隐藏，让他显示出来即可
                this.x = w;
            }
            if(this.y > h){
                this.y = h;
            }
            if(this.x < 0){
                this.x = 0;
            }
            if(this.y < 0){
                this.y = 0;
            }
        }
        this.draw = function(){                 //绘制粒子的函数
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    }
</script>

以上是詳解使用HTML5 Canvas建立動態粒子網格動畫的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！