家好，说起JQuery这款史诗级的JavaScript“辅助”，大家是不是感到既熟悉又亲切？废话不多说，现在咱们来看看jquery.particleground.js的粒子效果吧！

jquery.particleground.js

现在，我们做最简单的引用：

demo

运行结果：

jquery.particleground.js

现在，我们总结一下：

jquery.particleground.min.js的执行，需要引入jquery-3.2.1.min.js和jquery.particleground.min.js两个JS文件，且JQuery在jquery.particleground.min.js之前，最后才是实例化jquery.particleground.min.js。

咱们看看作者怎么说的：

官方实例

官方提供了如下参数：

minSpeedX

0.1

maxSpeedX

0.7

minSpeedY

0.1

maxSpeedY

0.7

directionX

'center'

Can be one of 'center', 'left' or 'right'. 'center' means that the dots will bounce off the edges of the canvas.

directionY

'center'

Can be one of 'center', 'up' or 'down'. 'center' means that the dots will bounce off the edges of the canvas.

density

10000

Determines how many particles will be generated: one particle every n pixels.

dotColor

'#666666'

lineColor

'#666666'

particleRadius

7

Dot size

lineWidth

1

curvedLines

false

proximity

100

How close two dots need to be, in pixels, before they join.

parallax

true

parallaxMultiplier

5

The lower the number, the more extreme the parallax effect wil be.

onInit

function() {}

A callback executed after Particleground initializes.

onDestroy

function() {}

A callback executed after Particleground is destroyed.

“dotColor”顾名思义，是粒子点的颜色，我们以“dotColor”为例，给她一个动人的十六进制橘黄色“#FF7500”看看她有什么变化。

橘黄

运行结果：

橘黄

现在，我们再加一个参数：“lineColor”顾名思义，“lineColor”是连接粒子的线条颜色，我们让她变成“祖母绿”——“#057748”。

祖母绿

运行结果：

祖母绿

请读者举一反三，琢磨一下其他参数，小编将不再赘述。除此之外，jquery.particleground.js还有几个方法（function），希望读者自行研究。

最近一个月，小编将会带读者纵观JQuery世界的各种插件，请读者关注小编，精彩评测不容错过！

习canvas，javascript的小伙伴，可以跟着我这篇文章的思路一起做一个小效果出来，代码都齐全了。

这里还是要说一下我的前端学习群：230354270，从我一个到现在的都是看我每一篇文章来的，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

首先看一下源图和转换成粒子效果的对比图：

左侧图片为源图，右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可

1:图片是通过image对象形式绘制在画布上的，然后使用Canvas的getImageData接口，获取图像的像素信息。

var imageData=ctx.getImageData(x, y, width, height);

参数说明：x，y为画布上的x和y坐标

width，height为获取指定区域图像的信息

返回值说明：imageData为返回值，它是一个对象，包含三个属性

2:了解像素区域数据的排布说明，以上获取的图片数据像素信息(imageData对象中的data属性)为RGBA整型的一维数组数据。一个像素是有4个值（R,G,B,A）组成的。也就是说，数组信息每四个为一个像素点。因此，有以下规则，

第一个像素信息为：RGBA(data[0],data[1],data[2],data[3])

第二个像素信息为：RGBA(data[4],data[5],data[6],data[7])

.....

第N个像素信息为: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

另外，像素区域既然是一个区域，它是有宽和高的。上面的推算公式适合单独一行使用定位一个像素点。所以计算像素点时要考虑到在整个图像区域内定位：

以上图为例。图像的宽和高都为200，如果按照每一个像素为一行一列时。则该图像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置信息为：

var pos =[( i-1 )*200]+( j-1 )]*4;

其中，公式中的 i 表示行数，j 表示列数。200为图像的宽度。

demo代码：

上面如果不理解， 对照代码运行一下试试理解吧：

这次没能为粒子加上炫酷的动态效果~~下次补上，找一些算法就可以粒子动起来的，有兴趣可以做做看~

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助

整个效果的功能都完成了

如果大家想学习canvas，JavaScript，可以加群：230354270 群里面有每天都会上传视频供大家学习，欢迎学习交流的小伙伴过来一起学习交流！

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘HTML网页’关注后回复可以领取一套完整的学习视频！