詳解使用HTML5 Canvas創(chuàng)建動(dòng)態(tài)粒子網(wǎng)格動(dòng)畫(huà)

最近看到一個(gè)粒子網(wǎng)格動(dòng)畫(huà)挺炫的，本身也就做了一個(gè)，當(dāng)背景挺不錯(cuò)的。CSDN不能上傳超過(guò)2M的圖片，所以就簡(jiǎn)單截了一個(gè)靜態(tài)圖片：

下面就開(kāi)始說(shuō)怎么實(shí)現(xiàn)這個(gè)結(jié)果吧：

首先當(dāng)然是添加一個(gè)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的作用是可以放在一些元素的下面當(dāng)做背景。

為了確保canvas能夠充滿(mǎn)整個(gè)欣賞器，所以要將canvas的寬高設(shè)置成和欣賞器一樣：

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

上面w和h分別代表欣賞器的寬高。

獲得了欣賞器的寬高，接下來(lái)就是在里面畫(huà)粒子了，這里我們必要提前定義一些粒子的參數(shù)：

var opt = {
    particleAmount: 50,         //粒子個(gè)數(shù)
    defaultSpeed: 1,            //粒子活動(dòng)速度
    variantSpeed: 1,            //粒子活動(dòng)速度的變量
    particleColor: "rgb(32,245,245)",       //粒子的顏色
    lineColor:"rgb(32,245,245)",            //網(wǎng)格連線(xiàn)的顏色
    defaultRadius: 2,           //粒子半徑
    variantRadius: 2,           //粒子半徑的變量
    minDistance: 200            //粒子之間連線(xiàn)的最小距離
};

上面的速度變量和半徑變量都是為了保證粒子的大小和速度不是千篇一律。

然后我們?cè)賱?chuàng)建一個(gè)類(lèi)用來(lái)初始化粒子，代碼比較長(zhǎng)，我都加了解釋?zhuān)?/p>

function Partical(){
    this.x = Math.random()*w;           //粒子的x軸坐標(biāo)
    this.y = Math.random()*h;           //粒子的y軸坐標(biāo)
    this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random();     //粒子的活動(dòng)速度
    this.directionAngle = Math.floor(Math.random()*360);                //粒子活動(dòng)的方向
    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(){                   //粒子的更新函數(shù)
        this.border();                           //判斷粒子是否到了邊界
        this.x += this.vector.x;                //粒子下臨時(shí)刻在x軸的坐標(biāo)
        this.y += this.vector.y;                //粒子下臨時(shí)刻在y軸的坐標(biāo)
    }
    this.border = function(){               //判斷粒子是都到達(dá)邊界
        if(this.x >= w || this.x<= 0){      //假如到達(dá)左右邊界，就讓x軸的速度變?yōu)樵瓉?lái)的負(fù)數(shù)
            this.vector.x *= -1;
        }
        if(this.y >= h || this.y <= 0){     //假如到達(dá)上下邊界，就讓y軸的速度變?yōu)樵瓉?lái)的負(fù)數(shù)
            this.vector.y *= -1;
        }
        if(this.x > w){                     //下面是改變欣賞器窗口大小時(shí)的操作，改變窗口大小后有的粒子會(huì)被隱蔽，讓他表現(xiàn)出來(lái)即可
            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(){                 //繪制粒子的函數(shù)
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

1、每個(gè)粒子的初始速度和角度是隨機(jī)生成的，粒子的顏色通過(guò)相干的設(shè)置選項(xiàng)來(lái)確定。

2、this.vector用來(lái)存儲(chǔ)粒子的移動(dòng)方向：假如this.vector.x為1，則粒子向右活動(dòng)；假如是-1，則粒子向左移動(dòng)。同樣，假如this.vector.y為負(fù)，則粒子向上移動(dòng)，假如為正，則粒子向下移動(dòng)。

this.update用來(lái)更新每個(gè)粒子下一個(gè)位置的坐標(biāo)。首先，進(jìn)行邊緣檢測(cè)；假如粒子的移動(dòng)超出了canvas的尺寸，則將方向向量乘以-1產(chǎn)生反向的活動(dòng)方向。

3、窗口縮放可能會(huì)引起粒子超出邊界，如此一來(lái)邊緣檢測(cè)函數(shù)就捕獲不到了，所以就必要一系列的if語(yǔ)句來(lái)檢測(cè)這種情況，將粒子的位置重置為當(dāng)前canvas的邊界。

4、最后一步，將這些點(diǎn)繪制到畫(huà)布上。

粒子的類(lèi)已經(jīng)寫(xiě)好了，下面就把他繪制出來(lái)：

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

上面初始化了opt.particleAmount個(gè)粒子對(duì)象，初始化了對(duì)象但是并沒(méi)有繪制出來(lái)，下面是loop函數(shù)：

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()函數(shù)每實(shí)行一次，都會(huì)消滅canvas上的內(nèi)容，然后通過(guò)粒子對(duì)象的update()函數(shù)重新計(jì)算粒子的坐標(biāo)，最后通過(guò)粒子對(duì)象的draw()函數(shù)來(lái)繪制粒子。下面是這個(gè)時(shí)候的結(jié)果：

但是在欣賞器窗口大小改變以后有些粒子就會(huì)消散不見(jiàn)，這個(gè)時(shí)候必要添加一個(gè)事件來(lái)監(jiān)聽(tīng)欣賞器大小是否改變：

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

然后必要來(lái)寫(xiě)winResize()函數(shù)，這里必要細(xì)致一下，欣賞器改變的時(shí)候觸發(fā)resize事件的次數(shù)會(huì)分外頻繁，稍微移動(dòng)一下欣賞器的邊緣就是觸發(fā)幾十次resize事件，那么也就會(huì)重新計(jì)算幾十次欣賞器大小，比較消費(fèi)性能，這個(gè)大家可以測(cè)試一下，這里就直接說(shuō)解決方法吧，其實(shí)我們要的只是欣賞器改變后的最后的大小，至于中心到底改變了多少次和我們沒(méi)有關(guān)系，所以我們可以在欣賞器窗口改變的時(shí)候延緩200毫秒后實(shí)行計(jì)算欣賞器大小的事件，假如在這期間一向觸發(fā)resize事件，那就一向今后延緩200毫秒，聽(tīng)起來(lái)挺復(fù)雜，其實(shí)代碼很簡(jiǎn)單：

var particle = [], w,h;     //粒子數(shù)組，欣賞器寬高
var delay = 200,tid;        //延緩實(shí)行事件和setTimeout事件引用
function winResize(){
    clearTimeout(tid);
    tid = setTimeout(function(){
        getSize();          //獲取欣賞器寬高，在文章最上面有介紹
    },delay)
}

如許所有的粒子動(dòng)畫(huà)都完成了，接下來(lái)就可以在粒子之間畫(huà)線(xiàn)了，我們上面定義的opt對(duì)象里面有一個(gè)minDistance變量，當(dāng)兩個(gè)粒子之間的連線(xiàn)小于這個(gè)值的時(shí)候，我們就給他們之間畫(huà)上線(xiàn)。

那么如何計(jì)算兩個(gè)粒子之間的距離呢，大家可以回想一下初中數(shù)學(xué)第一課，勾股定理，直角三角形兩個(gè)直角邊的平方和等于第三條變的平方，看下面：

我們?nèi)缃裰烂總€(gè)粒子的x軸和y軸的坐標(biāo)，那么我們就可以計(jì)算出兩個(gè)點(diǎn)之間的距離了，寫(xiě)一個(gè)函數(shù)，傳入兩個(gè)點(diǎn)，如下：

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

如今我們可以計(jì)算出兩個(gè)點(diǎn)的距離，那么我們就計(jì)算出所有每個(gè)粒子同其他所有粒子的距離，來(lái)確定它們之間是否必要連線(xiàn)，當(dāng)然假如所有粒子的顏色深度都千篇一律，那就有點(diǎn)丑了，所以我們這里可以根據(jù)兩個(gè)粒子之間的距離來(lái)決定連線(xiàn)的透明度，兩個(gè)粒子距離越近，越不透明，距離越遠(yuǎn)，越透明，超過(guò)肯定距離就不表現(xiàn)了。

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

上面?zhèn)魅氲膬蓚€(gè)參數(shù)分別是一個(gè)點(diǎn)和整個(gè)點(diǎn)的數(shù)組，let opacity = 1 -distance/opt.minDistance;用于判斷連線(xiàn)之間的透明度同時(shí)也判斷了距離，距離大于opt.minDistance時(shí)，opacity為負(fù)，下面判斷時(shí)就過(guò)濾掉了，上面的顏色用到了正則表達(dá)式，必要先解析最上面opt對(duì)象里給出的顏色，然后再加上透明度，這段代碼如下：

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

最后在loop()函數(shù)里面賡續(xù)循環(huán)計(jì)算距離就可以了，在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++){   //添加的是這個(gè)循環(huán)
            linePoint(particle[i],particle)
        }
        window.requestAnimationFrame(loop);
    }

必要指出的是：假如添加過(guò)多的點(diǎn)和/或過(guò)多的連接距離（連接距離會(huì)創(chuàng)建過(guò)多的線(xiàn)條），動(dòng)畫(huà)也會(huì)扛不住。當(dāng)視口變窄時(shí)最好降低粒子的活動(dòng)速度：粒子的尺寸越小，在愈加狹小空間內(nèi)的移動(dòng)速度貌似會(huì)越快。

表現(xiàn)整段代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas粒子動(dòng)畫(huà)</title>
    <style>
        #canvas{
            position: absolute;
            display: block;
            left:0;
            top:0;
            background: #0f0f0f;
            z-index: -1;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var opt = {
        particleAmount: 50,     //粒子個(gè)數(shù)
        defaultSpeed: 1,        //粒子活動(dòng)速度
        variantSpeed: 1,        //粒子活動(dòng)速度的變量
        particleColor: "rgb(32,245,245)",       //粒子的顏色
        lineColor:"rgb(32,245,245)",            //網(wǎng)格連線(xiàn)的顏色
        defaultRadius: 2,           //粒子半徑
        variantRadius: 2,           //粒子半徑的變量
        minDistance: 200            //粒子之間連線(xiàn)的最小距離
    };
    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)
    }
[object Object]

    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軸坐標(biāo)
        this.y = Math.random()*h;           //粒子的y軸坐標(biāo)
        this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random();     //粒子的活動(dòng)速度
        this.directionAngle = Math.floor(Math.random()*360);                //粒子活動(dòng)的方向
        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(){                   //粒子的更新函數(shù)
            this.border();                           //判斷粒子是否到了邊界
            this.x += this.vector.x;                //粒子下臨時(shí)刻在x軸的坐標(biāo)
            this.y += this.vector.y;                //粒子下臨時(shí)刻在y軸的坐標(biāo)
        }
        this.border = function(){               //判斷粒子是都到達(dá)邊界
            if(this.x >= w || this.x<= 0){      //假如到達(dá)左右邊界，就讓x軸的速度變?yōu)樵瓉?lái)的負(fù)數(shù)
                this.vector.x *= -1;
            }
            if(this.y >= h || this.y <= 0){     //假如到達(dá)上下邊界，就讓y軸的速度變?yōu)樵瓉?lái)的負(fù)數(shù)
                this.vector.y *= -1;
            }
            if(this.x > w){                     //下面是改變欣賞器窗口大小時(shí)的操作，改變窗口大小后有的粒子會(huì)被隱蔽，讓他表現(xiàn)出來(lái)即可
                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(){                 //繪制粒子的函數(shù)
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    }
</script>
</body>
</html>

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。