先说说Canvas的基本设定。Canvas是HTML5里的一种画图用的东西，你可以用来做些小动画。要把Canvas当背景使的话，最好把它的z-index设成-1，这样就不会占到别的元素的镜头了。此外，为了让Canvas填满整个浏览器窗口，你得时不时调整下Canvas的宽高，让它跟窗口大小保持一致。
粒子参数的定义
画粒子前得先设定下粒子的样子，比如多少颗呀、多大啊、啥颜色的等等。设定完了，接着把粒子给初始化。这事儿可能有点儿麻烦，不过别急，慢工出细活！
#canvas{
position: absolute;
display: block;
left:0;
top:0;
background: #0f0f0f;
z-index: -1;
}
粒子初始化类
下面咱们学着写个新类，用来给粒子做出生化演示。虽然这代码有点儿复杂，但是我会在每个步骤上都提供详细解释，帮你好好理解它是怎么运作的哈。做完这个类后，就可以生成粒子并且设定它们的基础信息，比如说位置啊、速度啊还有衣服的颜色呀等等。
function getSize(){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
处理resize事件
平时用浏览器的时候，你可能注意到，当窗口大小变化，resize事件老弹出来，这不禁让人烦心，因为太耗费资源了，每次都得算算浏览器有多大。所以，咱们就来用个小方法，在resize事件发生之后，等上200毫秒再开始做计算，这样就能避免频繁地重复计算！
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 1、每个粒子的初始速度和角度是随机生成的，粒子的颜色通过相关的设置选项来确定。
2、this.vector用来存储粒子的移动方向：如果this.vector.x为1，则粒子向右运动；如果是-1，则粒子向左移动。同样，如果this.vector.y为负，则粒子向上移动，如果为正，则粒子向下移动。
this.update用来更新每个粒子下一个位置的坐标。首先，进行边缘检测；如果粒子的移动超出了canvas的尺寸，则将方向向量乘以-1产生反向的运动方向。
3、窗口缩放可能会引起粒子超出边界，如此一来边缘检测函数就捕捉不到了，所以就需要一系列的if语句来检测这种情况，将粒子的位置重置为当前canvas的边界。
4、最后一步，将这些点绘制到画布上。
粒子的类已经写好了，下面就把他绘制出来：
function init(){
getSize();
for(let i = 0;i上面初始化了opt.particleAmount个粒子对象，初始化了对象但是并没有绘制出来，下面是loop函数：
function loop(){
ctx.clearRect(0,0,w,h);
for(let i = 0;iloop()函数每执行一次，都会清除canvas上的内容，然后通过粒子对象的update()函数重新计算粒子的坐标，最后通过粒子对象的draw()函数来绘制粒子。下面是这个时候的效果：
但是在浏览器窗口大小改变以后有些粒子就会消失不见，这个时候需要添加一个事件来监听浏览器大小是否改变：
window.addEventListener("resize",function(){
winResize()
},false);
要让两粒小点点能连起线，咱得有个算它们离多远的小程序。这个小程序只要输入这两粒小点点儿在哪儿，就能告诉你它们挨得多近。这个数值够大，咱们就能画线，线长得出来，小点点也就能关联起来了。
动态调整连线透明度
var particle = [], w,h; //粒子数组，浏览器宽高
var delay = 200,tid; //延缓执行事件和setTimeout事件引用
function winResize(){
clearTimeout(tid);
tid = setTimeout(function(){
getSize(); //获取浏览器宽高，在文章最上面有介绍
},delay)
}
画连线的时候，还能通过粒子间的距离来改变线的透明度。离得近的，线条变模糊；离得远的，线条就明显点。这样就能看清不同远近的地方了，让动画更逼真好玩。
循环更新粒子状态
最后，得在loop()函数里不停循环更新粒子的状况，而且，还得算算它们之间的距离，再根据距离改变连线的样子，这样，粒子动画就可以动起来了哟~
总结与互动
搞定，咱们用Canvas打造出了炫酷的动态粒子网格动画！它不仅看起来赏心悦目，还散发出浓浓的科技气息。希望这个指南让你对Canvas有更深的认识和掌握。那就让我来问你一个问题吧：你觉得将来网页设计中，这种动态粒子动画会起到什么作用？快来评论区分享你的想法，别忘了给这篇文章点个赞和分享出去，让大家都看到Canvas的美妙之处！
function getDistance(point1,point2){
return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
}
评论0