最近在网上发现个很酷的粒子网格动画，忍不住动手试了试 HTML5 Canvas。摸清 Canvas 玩法以后，定好颗粒参数，同时还要留意浏览器窗口大小的变动，最后终于做出了一个动态粒子网格动画。接下来给大家说说我是咋弄出来的！
设置Canvas背景
#canvas{
position: absolute;
display: block;
left:0;
top:0;
background: #0f0f0f;
z-index: -1;
}
想知道怎样玩转动态粒子网格动画吗？首先，把画布的z-index调为-1，别挡住了别的东西哟~接着，保持画布和浏览器窗口一样大，这样才能都看清楚！
定义粒子参数
function getSize(){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
画粒子前要先了解下几个关键参数，比如每颗粒子刚出现时候的速度，转动的角度，还有就是颜色。设定这些很简单，就能画出超多好看鲜艳的粒子了！
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= h || this.y 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();
}
}
下一步，就是搞一个新分类来搞定那些小粒子的开始设定。在这儿，我们可以调整每个粒子的方向和速度，还可以随时变它们的位置，这样画图时会更顺手！
绘制粒子
搞定那些粒子之后，咱们得把它们展示出来。用个for循环，再分别调一下update()和draw()这两个函数，就能看到每个粒子在屏幕上活灵活现地跳跃了~
监听浏览器窗口大小变化
function init(){
getSize();
for(let i = 0;i<opt.particleAmount; i++){
particle.push(new Partical());
}
loop();
}
浏览器界面怎么突然变得怪怪的？还有些小东西没了！别急，咱先搞个监控看着它，winResize()这个小助手能帮忙搞定浏览器的大小问题，拖延症疗法也能快速修复。所以，动画效果还美美的哟~
连接粒子并添加连线
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);
}
不光要画图形，还要把线连起来，主要就是要算出两点间真实的距离，看看有没有比你设定的最小值还小。对的话就快点联结它们，别忘了调一调线条的透明度，画面看起来才会舒服！
优化性能
编码时别加太多东西或拉太长的线，否则动画会卡住。如果视线变小了，就得把粒子速度降下来，让它们能自由活动！
window.addEventListener("resize",function(){
winResize()
},false);
试试HTML5Canvas画布的新方法，能画出炫酷的动态粒子网格动画！爱艺术的朋友别错过，肯定有惊喜等着你们！
var particle = [], w,h; //粒子数组，浏览器宽高
var delay = 200,tid; //延缓执行事件和setTimeout事件引用
function winResize(){
clearTimeout(tid);
tid = setTimeout(function(){
getSize(); //获取浏览器宽高，在文章最上面有介绍
},delay)
}
评论0