🐲龙年临门，给大家画条龙

Jimmy_is_jimmy

发布于 2024-02-02 14:49:16

710

发布于 2024-02-02 14:49:16

文章被收录于专栏：call_me_Rcall_me_R

龙年即将到来，给大家画一条龙，提前祝读者祥龙翱翔，岁月腾飞。

本博文绘制的龙由粒子进行重组展示。使用到的素材图（网图，侵删）如下：

实现的效果如下：

在之前文章引力粒子特效 - 归为尘埃中，我们实现的是粒子破碎的效果，而本文实现的是粒子重组，大同小异，异曲同工。

我们讲讲关键的两个点，吃透这两个点，已经成功了一大半：

图转粒子
粒子加速

图转粒子

首先，我们已经得到图片素材，如上。

接下来，我们需要的到图片的数据：

// drawImage 将图片绘制在 canvas 上
context.drawImage(imgDom, startX, startY);
// getImageData 得到整个画布的数据
let imgData = context.getImageData(0, 0, canvasDom.width, canvasDom.height).data;

得到的数据比较特殊，我们可以简单理解，一个像素里面有四个 imgData 值，四个值分别代表 rgba，即 红，绿，蓝和透明度。拿画布的原点（左上角）第一个点来举例：

let red = imgData[0];
let green = imgData[1];
let blue = imgData[2];
let alpha = imgData[3];

这些颜色值都是需要赋值在粒子的颜色上的。

那么说到粒子，粒子需要具备的属性如下：

// 10 为自定义的数值，可根据需要调整
{
  x: canvasDom.width*Math.random() * 10, // 随机 x 值
  y: canvasDom.height*Math.random() * 10, // 随机 y 值
  originX: originX, // 图片在 canvas 上的原始 x 值
  originY: originY, // 图片在 canvas 上的原始 y 值
  color: color, // 粒子的颜色，也就是我们上面提到的 rgba 颜色
  vx: 0, // 粒子在 x 轴方向移动的速度，初始值为 0
  vy: 0, // 粒子在 y 轴方向移动的速度，初始值为 0
  size: size * Math.random(), // 粒子的随机大小
}

嗯，收集完粒子之后，我们将其绘制在 canvas 上：

// 给定粒子的颜色为画笔的颜色
context.fillStyle = paticle.color;
// 填充粒子（矩形）
context.fillRect(paticle.originX, paticle.originX, paticle.size, paticle.size);

效果如下：

咦，不错哦😯。这感觉，加点粒子闪烁，那不岂是变成星空🌃闪耀了。这个后面可以出篇文章跟进，本文就点到为止。

粒子加速

👌，粒子我们已经有了。我们需要为粒子添加特效了。

粒子动起来的加速度呢？

我们高中物理都学过万有引力的定律：

F＝GmMr2F＝G\frac{mM}{r^2}F＝Gr2mM

F 是物体上的合力
m / M 是物体的质量
G 是引力常量
r 是两个物体的距离

然后，我们又知道牛顿的第二定律：

F＝m.aF＝m.aF＝m.a

F 是引力
m 是物体的质量
a 是物体的加速度

结合上面的两条定律，那么，我们知道粒子的加速度公式如下：

a＝GMr2a＝G\frac{M}{r^2}a＝Gr2M

因为这里，我们并没有考虑到物体的质量，所以 G*M 的值，我们设定为一个常量，即为 const STRENGTH = 3 * 1000 * 1000，当然，这个值读者可根据实际情况进行调整。

所以，我们可以得到每个粒子每个时刻的加速度，或者说 x 轴和 y 轴的每个时刻移动的距离：

let dx = paticle.originX - paticle.x;
let dy = paticle.originY - paticle.y;
// 两个粒子之间的直线距离
let distance = Math.sqrt(dx * dx + dy * dy);
// 两个粒子线段与 x 轴的夹角
let angle = Math.atan2(dy, dx);
// 粒子的加速度
let acceleration = STRENGTH / (distance * distance);
// 粒子在 x 轴方向此时的速度
paticle.vx += acceleration * Math.cos(angle); // acceleration * Math.cos(angle) 表示在 x 轴方向的加速度
// 粒子在 y 轴方向此时的速度
paticle.vy += acceleration * Math.sin(angle); // acceleration * Math.sin(angle) 表示在 y 轴方向的加速度

上面👆我们得到了粒子当前速度，那么我们就计算粒子当前的距离了：

paticle.x += paticle.vx;
paticle.y += paticle.vy;

当粒子靠近得足够的距离，我们将粒子放置在原来的坐标位置 (originX, originY)：

if(paticle.x > (paticle.originX - paticle.vx) && 
  paticle.x < (paticle.originX + paticle.x)  && 
  paticle.y > (paticle.originY - paticle.vy) &&
  paticle.y < (paticle.originY + paticle.vy)) {
  paticle.x = paticle.originX;
  paticle.y = paticle.originY;
}

👌，大功告成🎉🎉🎉