本文首发于我的博客，这是我的github，欢迎star。
这篇博客是模仿nest.js实现一个demo，由简单到复杂，来一步步的实现它。这里是效果预览。我的github里边还有很多别的前端的demo，喜欢的话可以点个star，你的支持就是我的动力。
从一道面试题开始
实现一个半径
10px的小球在500px*500px的方块中做直线运动，初始方向随机，速度保持不变，碰撞到墙壁后反弹。
看下效果，思路很简单，将小球定位在方块中，设置xy方向上的速度，每帧动画给小球定位的值加上对应方向的速度值，在检测到小球碰撞墙壁的时候，将对应方向的速度置为反方向就可以了。这里是实现的代码，没有用到canvas，但是思路一致。
尝试实现
画出一个弹射的小球很简单，那怎么用多个小球实现nest.js这样的效果呢。这样的特效肯定不能用Dom直接做，太耗费性能，也做不出来，这时就显露出canvas的强大之处了。
同样的，用canvas生成多个弹来弹去的小球。首先不要管鼠标如何吸附这些小圆点，只做小球之间的连线。在每次绘制小球之前，判断一下它和之前的小球的距离是不是小于极限距离，小于就以它俩为端点绘制一条线。代码如下，思路都写在注释里：
const theCanvas = document.getElementById('theCanvas'),
ctx = theCanvas.getContext('2d'),
mix = 6000; //会产生连线的极限距离的平方
//将canvas铺满浏览器
let canvas_width = theCanvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = theCanvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
points = [];
theCanvas.style = "position: fixed; top: 0px; left: 0px;";
//绘制函数，用requestAnimationFrame调用实现动画
function draw() {
//清屏
ctx.clearRect(0, 0, canvas_width, canvas_height);
let i,pi,x_dist,y_dist;
//遍历点集合绘制线条
points.forEach((p, index) => {
p.x += p.xa, //按指定速度移动
p.y += p.ya,
p.xa *= p.x > canvas_width || p.x < 0 ? -1 : 1,
p.ya *= p.y > canvas_height || p.y < 0 ? -1 : 1,
ctx.fillRect(p.x - 0.5, p.y - 0.5, 1, 1); //绘制点，其实是小方块
//类似于握手问题，两个点之间只绘制一次线
for(i = index + 1; i < points.length; i++) {
pi = points[i];
x_dist = p.x - pi.x;
y_dist = p.y - pi.y;
dist = x_dist * x_dist + y_dist * y_dist;
//判断点之间的距离是否小于极限距离
if(dist < mix) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(pi.x, pi.y);
ctx.stroke();
}
}
}),requestAnimationFrame(draw);
}
//随机生成100个点
for(let i = 0; i < 100; i++ ) {
let x = Math.random() * canvas_width, //初始坐标
y = Math.random() * canvas_height,
xa = 2 * Math.random() - 1, //x速度
ya = 2 * Math.random() - 1; //y速度
points[i] = {x, y, xa, ya};
}
draw();
看下效果，丑陋，和人家的不一样，很生硬。因为连线不是突然出现突然消失的，点和点之间的连线是渐渐的出现，然后渐渐消失的。给连线添加动态的属性，用点和点的之间的距离来计算连线的粗细、透明度，在两点距离比较远的时候线会变淡，这样看起来就舒服多了。
for(i = index + 1; i < points.length; i++) {
pi = points[i];
x_dist = p.x - pi.x;
y_dist = p.y - pi.y;
dist = x_dist * x_dist + y_dist * y_dist;
//根据两点距离得到一个参数w
w = (mix - dist) / mix;
//判断点之间的距离是否小于极限距离
if(dist < mix) {
ctx.beginPath();
//根据参数w设置连线宽度和透明度
ctx.lineWidth = w / 2;
ctx.strokeStyle = `rgba(110,110,110,${w + 0.2})`;
ctx.moveTo(p.x, p.y);
ctx.lineTo(pi.x, pi.y);
ctx.stroke();
}
}
添加鼠标事件
先是加入对鼠标的响应。在鼠标进入浏览器时添加鼠标这个点，否则移除。
window.onmousemove = e => {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
};
window.onmouseout = () => {
current_point.x = null;
current_point.y = null;
};
//将鼠标的点添加至点集合中
all_points = [...random_points,current_point];
要实现一个鼠标吸附粒子的效果，思路就是粒子和鼠标的距离在一定范围内时，给粒子添加一个向着鼠标的速度，结果就好像是粒子受到鼠标的吸附一样。这是一段鼠标吸附效果的核心代码：
//当两点距离小于极限距离时产生连线，当第二个点是鼠标所产生点时，粒子如果在范围内就会产生向鼠标点的速度，实现吸附效果
dist < pi.max && (pi === current_point && dist >= pi.max / 2 && (p.x -= 0.03 * x_dist, p.y -= 0.03 * y_dist));
加入鼠标的点之后再做一些调整，得到最终的代码。
其他的粒子特效
还可以利用canvas的getImageData属性，将图片粒子化，做成轮播图，点击这里预览，主要思路是用getImageData取到图片像素点的信息，每隔一段取一个样本，以这个样本绘制粒子，绘制出类似于马赛克一样的图片，然后给粒子加上运动的效果就可以了，这里是具体的代码实现。
这篇博客到这就结束了，这是我的github，欢迎来访，欢迎star。
