這篇“怎么使用HTML5 Canvas創(chuàng)建動態(tài)粒子網(wǎng)格動畫”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“怎么使用HTML5 Canvas創(chuàng)建動態(tài)粒子網(wǎng)格動畫”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

html有什么特點

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。  3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

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

下面就開始說怎么實現(xiàn)這個效果吧：

首先當(dāng)然是添加一個canvas了：

下面是樣式：

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

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

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

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

獲得了瀏覽器的寬高，接下來就是在里面畫粒子了，這里我們需要提前定義一些粒子的參數(shù)：

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

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

然后我們再創(chuàng)建一個類用來初始化粒子，代碼比較長，我都加了注釋：

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();     //粒子的運動速度
    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(){                   //粒子的更新函數(shù)
        this.border();                           //判斷粒子是否到了邊界
        this.x += this.vector.x;                //粒子下一時刻在x軸的坐標(biāo)
        this.y += this.vector.y;                //粒子下一時刻在y軸的坐標(biāo)
    }
    this.border = function(){               //判斷粒子是都到達邊界
        if(this.x >= w || this.x<= 0){      //如果到達左右邊界，就讓x軸的速度變?yōu)樵瓉淼呢?fù)數(shù)
            this.vector.x *= -1;
        }
        if(this.y >= h || this.y <= 0){     //如果到達上下邊界，就讓y軸的速度變?yōu)樵瓉淼呢?fù)數(shù)
            this.vector.y *= -1;
        }
        if(this.x > w){                     //下面是改變?yōu)g覽器窗口大小時的操作，改變窗口大小后有的粒子會被隱藏，讓他顯示出來即可
            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、每個粒子的初始速度和角度是隨機生成的，粒子的顏色通過相關(guān)的設(shè)置選項來確定。

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

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

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

4、最后一步，將這些點繪制到畫布上。

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

function init(){
   getSize();
   for(let i = 0;i
上面初始化了opt.particleAmount個粒子對象，初始化了對象但是并沒有繪制出來，下面是loop函數(shù)：
function loop(){
    ctx.clearRect(0,0,w,h);
    for(let i = 0;i
loop()函數(shù)每執(zhí)行一次，都會清除canvas上的內(nèi)容，然后通過粒子對象的update()函數(shù)重新計算粒子的坐標(biāo)，最后通過粒子對象的draw()函數(shù)來繪制粒子。下面是這個時候的效果：
但是在瀏覽器窗口大小改變以后有些粒子就會消失不見，這個時候需要添加一個事件來監(jiān)聽瀏覽器大小是否改變：
window.addEventListener("resize",function(){
    winResize()
},false);
然后需要來寫winResize()函數(shù)，這里需要注意一下，瀏覽器改變的時候觸發(fā)resize事件的次數(shù)會特別頻繁，稍微移動一下瀏覽器的邊緣就是觸發(fā)幾十次resize事件，那么也就會重新計算幾十次瀏覽器大小，比較消耗性能，這個大家可以測試一下，這里就直接說解決方法吧，其實我們要的只是瀏覽器改變后的最后的大小，至于中間到底改變了多少次和我們沒有關(guān)系，所以我們可以在瀏覽器窗口改變的時候延緩200毫秒后執(zhí)行計算瀏覽器大小的事件，如果在這期間一直觸發(fā)resize事件，那就一直往后延緩200毫秒，聽起來挺復(fù)雜，其實代碼很簡單：
var particle = [], w,h;     //粒子數(shù)組，瀏覽器寬高
var delay = 200,tid;        //延緩執(zhí)行事件和setTimeout事件引用
function winResize(){
    clearTimeout(tid);
    tid = setTimeout(function(){
        getSize();          //獲取瀏覽器寬高，在文章最上面有介紹
    },delay)
}
這樣所有的粒子動畫都完成了，接下來就可以在粒子之間畫線了，我們上面定義的opt對象里面有一個minDistance變量，當(dāng)兩個粒子之間的連線小于這個值的時候，我們就給他們之間畫上線。
那么如何計算兩個粒子之間的距離呢，大家可以回想一下初中數(shù)學(xué)第一課，勾股定理，直角三角形兩個直角邊的平方和等于第三條變的平方，看下面：
我們現(xiàn)在知道每個粒子的x軸和y軸的坐標(biāo)，那么我們就可以計算出兩個點之間的距離了，寫一個函數(shù)，傳入兩個點，如下：
function getDistance(point1,point2){
        return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
    }
現(xiàn)在我們可以計算出兩個點的距離，那么我們就計算出所有每個粒子同其他所有粒子的距離，來確定它們之間是否需要連線，當(dāng)然如果所有粒子的顏色深度都一模一樣，那就有點丑了，所以我們這里可以根據(jù)兩個粒子之間的距離來決定連線的透明度，兩個粒子距離越近，越不透明，距離越遠(yuǎn)，越透明，超過一定距離就不顯示了。
function linePoint(point,hub){
    for(let i = 0;i 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)魅氲膬蓚€參數(shù)分別是一個點和整個點的數(shù)組，let opacity = 1 -distance/opt.minDistance;用于判斷連線之間的透明度同時也判斷了距離，距離大于opt.minDistance時，opacity為負(fù)，下面判斷時就過濾掉了，上面的顏色用到了正則表達式，需要先解析最上面opt對象里給出的顏色，然后再加上透明度，這段代碼如下：
var line = opt.lineColor.match(/\d+/g);
最后在loop()函數(shù)里面不斷循環(huán)計算距離就可以了，在loop()中加入代碼后如下：
function loop(){
        ctx.clearRect(0,0,w,h);
        for(let i = 0;i
需要指出的是：如果添加過多的點和/或過多的連接距離（連接距離會創(chuàng)建過多的線條），動畫也會扛不住。當(dāng)視口變窄時好降低粒子的運動速度：粒子的尺寸越小，在愈加狹窄空間內(nèi)的移動速度貌似會越快。
顯示整段代碼：



    
    
    





以上是“怎么使用HTML5 Canvas創(chuàng)建動態(tài)粒子網(wǎng)格動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            

            網(wǎng)頁題目：怎么使用HTML5Canvas創(chuàng)建動態(tài)粒子網(wǎng)格動畫-創(chuàng)新互聯(lián)            

            當(dāng)前路徑：http://weahome.cn/article/dhhpoj.html