詳解使用HTML5 Canvas創(chuàng)建動態(tài)粒子網(wǎng)格動畫
最近看到一個粒子網(wǎng)格動畫挺炫的，本身也就做了一個，當(dāng)背景挺不錯的。CSDN不能上傳超過2M的圖片，所以就簡單截了一個靜態(tài)圖片：
下面就開始說怎么實(shí)現(xiàn)這個結(jié)果吧：
首先當(dāng)然是添加一個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能夠充滿整個欣賞器，所以要將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; //粒子下臨時(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)樵瓉淼呢?fù)數(shù)
this.vector.x *= -1;
}
if(this.y >= h || this.y <= 0){ //假如到達(dá)上下邊界，就讓y軸的速度變?yōu)樵瓉淼呢?fù)數(shù)
this.vector.y *= -1;
}
if(this.x > w){ //下面是改變欣賞器窗口大小時(shí)的操作，改變窗口大小后有的粒子會被隱蔽，讓他表現(xiàn)出來即可
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、每個粒子的初始速度和角度是隨機(jī)生成的，粒子的顏色通過相干的設(shè)置選項(xiàng)來確定。
2、this.vector用來存儲粒子的移動方向：假如this.vector.x為1，則粒子向右活動；假如是-1，則粒子向左移動。同樣，假如this.vector.y為負(fù)，則粒子向上移動，假如為正，則粒子向下移動。
this.update用來更新每個粒子下一個位置的坐標(biāo)。首先，進(jìn)行邊緣檢測；假如粒子的移動超出了canvas的尺寸，則將方向向量乘以-1產(chǎn)生反向的活動方向。
3、窗口縮放可能會引起粒子超出邊界，如此一來邊緣檢測函數(shù)就捕獲不到了，所以就必要一系列的if語句來檢測這種情況，將粒子的位置重置為當(dāng)前canvas的邊界。
4、最后一步，將這些點(diǎn)繪制到畫布上。
粒子的類已經(jīng)寫好了，下面就把他繪制出來：
function init(){
getSize();
for(let i = 0;i<opt.particleAmount; i++){
particle.push(new Partical());
}
loop();
}上面初始化了opt.particleAmount個粒子對象，初始化了對象但是并沒有繪制出來，下面是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í)行一次，都會消滅canvas上的內(nèi)容，然后通過粒子對象的update()函數(shù)重新計(jì)算粒子的坐標(biāo)，最后通過粒子對象的draw()函數(shù)來繪制粒子。下面是這個時(shí)候的結(jié)果：
但是在欣賞器窗口大小改變以后有些粒子就會消散不見，這個時(shí)候必要添加一個事件來監(jiān)聽欣賞器大小是否改變：
window.addEventListener("resize",function(){
winResize()
},false);然后必要來寫winResize()函數(shù)，這里必要細(xì)致一下，欣賞器改變的時(shí)候觸發(fā)resize事件的次數(shù)會分外頻繁，稍微移動一下欣賞器的邊緣就是觸發(fā)幾十次resize事件，那么也就會重新計(jì)算幾十次欣賞器大小，比較消費(fèi)性能，這個大家可以測試一下，這里就直接說解決方法吧，其實(shí)我們要的只是欣賞器改變后的最后的大小，至于中心到底改變了多少次和我們沒有關(guān)系，所以我們可以在欣賞器窗口改變的時(shí)候延緩200毫秒后實(shí)行計(jì)算欣賞器大小的事件，假如在這期間一向觸發(fā)resize事件，那就一向今后延緩200毫秒，聽起來挺復(fù)雜，其實(shí)代碼很簡單：
var particle = [], w,h; //粒子數(shù)組，欣賞器寬高
var delay = 200,tid; //延緩實(shí)行事件和setTimeout事件引用
function winResize(){
clearTimeout(tid);
tid = setTimeout(function(){
getSize(); //獲取欣賞器寬高，在文章最上面有介紹
},delay)
}如許所有的粒子動畫都完成了，接下來就可以在粒子之間畫線了，我們上面定義的opt對象里面有一個minDistance變量，當(dāng)兩個粒子之間的連線小于這個值的時(shí)候，我們就給他們之間畫上線。
那么如何計(jì)算兩個粒子之間的距離呢，大家可以回想一下初中數(shù)學(xué)第一課，勾股定理，直角三角形兩個直角邊的平方和等于第三條變的平方，看下面：
我們?nèi)缃裰烂總€粒子的x軸和y軸的坐標(biāo)，那么我們就可以計(jì)算出兩個點(diǎn)之間的距離了，寫一個函數(shù)，傳入兩個點(diǎn)，如下：
function getDistance(point1,point2){
return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
}如今我們可以計(jì)算出兩個點(diǎn)的距離，那么我們就計(jì)算出所有每個粒子同其他所有粒子的距離，來確定它們之間是否必要連線，當(dāng)然假如所有粒子的顏色深度都千篇一律，那就有點(diǎn)丑了，所以我們這里可以根據(jù)兩個粒子之間的距離來決定連線的透明度，兩個粒子距離越近，越不透明，距離越遠(yuǎn)，越透明，超過肯定距離就不表現(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)魅氲膬蓚€參數(shù)分別是一個點(diǎn)和整個點(diǎn)的數(shù)組，let opacity = 1 -distance/opt.minDistance;用于判斷連線之間的透明度同時(shí)也判斷了距離，距離大于opt.minDistance時(shí)，opacity為負(fù)，下面判斷時(shí)就過濾掉了，上面的顏色用到了正則表達(dá)式，必要先解析最上面opt對象里給出的顏色，然后再加上透明度，這段代碼如下：
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++){ //添加的是這個循環(huán)
linePoint(particle[i],particle)
}
window.requestAnimationFrame(loop);
}必要指出的是：假如添加過多的點(diǎn)和/或過多的連接距離（連接距離會創(chuàng)建過多的線條），動畫也會扛不住。當(dāng)視口變窄時(shí)最好降低粒子的活動速度：粒子的尺寸越小，在愈加狹小空間內(nèi)的移動速度貌似會越快。
表現(xiàn)整段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas粒子動畫</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, //粒子個數(shù)
defaultSpeed: 1, //粒子活動速度
variantSpeed: 1, //粒子活動速度的變量
particleColor: "rgb(32,245,245)", //粒子的顏色
lineColor:"rgb(32,245,245)", //網(wǎng)格連線的顏色
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)
}
[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(); //粒子的活動速度
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; //粒子下臨時(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)樵瓉淼呢?fù)數(shù)
this.vector.x *= -1;
}
if(this.y >= h || this.y <= 0){ //假如到達(dá)上下邊界，就讓y軸的速度變?yōu)樵瓉淼呢?fù)數(shù)
this.vector.y *= -1;
}
if(this.x > w){ //下面是改變欣賞器窗口大小時(shí)的操作，改變窗口大小后有的粒子會被隱蔽，讓他表現(xiàn)出來即可
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)容，盼望對大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。
本文地址：http://m.likemindfilms.com/tutorial/wd234.html
