canvas炫酷粒子特效

4,964 阅读4分钟

  这篇博客是模仿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));

  加入鼠标的点之后再做一些调整,得到最终的代码

其他的粒子特效

  还可以利用canvasgetImageData属性,将图片粒子化,做成轮播图,点击这里预览,主要思路是用getImageData取到图片像素点的信息,每隔一段取一个样本,以这个样本绘制粒子,绘制出类似于马赛克一样的图片,然后给粒子加上运动的效果就可以了,这里是具体的代码实现

这篇博客到这就结束了,这是我的github,欢迎来访,欢迎star。