最近看到一個粒子網格動畫挺炫的，自己也就做了一個，當背景挺不錯的。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、最后一步，將這些點繪制到畫布上。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。