家好，說(shuō)起JQuery這款史詩(shī)級(jí)的JavaScript“輔助”，大家是不是感到既熟悉又親切？廢話不多說(shuō)，現(xiàn)在咱們來(lái)看看jquery.particleground.js的粒子效果吧！

jquery.particleground.js

現(xiàn)在，我們做最簡(jiǎn)單的引用：

demo

運(yùn)行結(jié)果：

jquery.particleground.js

現(xiàn)在，我們總結(jié)一下：

jquery.particleground.min.js的執(zhí)行，需要引入jquery-3.2.1.min.js和jquery.particleground.min.js兩個(gè)JS文件，且JQuery在jquery.particleground.min.js之前，最后才是實(shí)例化jquery.particleground.min.js。

咱們看看作者怎么說(shuō)的：

官方實(shí)例

官方提供了如下參數(shù)：

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”顧名思義，是粒子點(diǎn)的顏色，我們以“dotColor”為例，給她一個(gè)動(dòng)人的十六進(jìn)制橘黃色“#FF7500”看看她有什么變化。

橘黃

運(yùn)行結(jié)果：

橘黃

現(xiàn)在，我們?cè)偌右粋€(gè)參數(shù)：“l(fā)ineColor”顧名思義，“l(fā)ineColor”是連接粒子的線條顏色，我們讓她變成“祖母綠”——“#057748”。

祖母綠

運(yùn)行結(jié)果：

祖母綠

請(qǐng)讀者舉一反三，琢磨一下其他參數(shù)，小編將不再贅述。除此之外，jquery.particleground.js還有幾個(gè)方法（function），希望讀者自行研究。

最近一個(gè)月，小編將會(huì)帶讀者縱觀JQuery世界的各種插件，請(qǐng)讀者關(guān)注小編，精彩評(píng)測(cè)不容錯(cuò)過(guò)！

習(xí)canvas，javascript的小伙伴，可以跟著我這篇文章的思路一起做一個(gè)小效果出來(lái)，代碼都齊全了。

這里還是要說(shuō)一下我的前端學(xué)習(xí)群：230354270，從我一個(gè)到現(xiàn)在的都是看我每一篇文章來(lái)的，可以說(shuō)都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來(lái)，歡迎初學(xué)和進(jìn)階中的小伙伴

首先看一下源圖和轉(zhuǎn)換成粒子效果的對(duì)比圖：

左側(cè)圖片為源圖，右側(cè)圖片為粒子效果圖。該效果是在Canvas畫(huà)布上制作的。將圖片制作成粒子效果相對(duì)而言是比較簡(jiǎn)單的。重點(diǎn)了解兩個(gè)知識(shí)點(diǎn)即可

1:圖片是通過(guò)image對(duì)象形式繪制在畫(huà)布上的，然后使用Canvas的getImageData接口，獲取圖像的像素信息。

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

參數(shù)說(shuō)明：x，y為畫(huà)布上的x和y坐標(biāo)

width，height為獲取指定區(qū)域圖像的信息

返回值說(shuō)明：imageData為返回值，它是一個(gè)對(duì)象，包含三個(gè)屬性

2:了解像素區(qū)域數(shù)據(jù)的排布說(shuō)明，以上獲取的圖片數(shù)據(jù)像素信息(imageData對(duì)象中的data屬性)為RGBA整型的一維數(shù)組數(shù)據(jù)。一個(gè)像素是有4個(gè)值（R,G,B,A）組成的。也就是說(shuō)，數(shù)組信息每四個(gè)為一個(gè)像素點(diǎn)。因此，有以下規(guī)則，

第一個(gè)像素信息為：RGBA(data[0],data[1],data[2],data[3])

第二個(gè)像素信息為：RGBA(data[4],data[5],data[6],data[7])

.....

第N個(gè)像素信息為: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

另外，像素區(qū)域既然是一個(gè)區(qū)域，它是有寬和高的。上面的推算公式適合單獨(dú)一行使用定位一個(gè)像素點(diǎn)。所以計(jì)算像素點(diǎn)時(shí)要考慮到在整個(gè)圖像區(qū)域內(nèi)定位：

以上圖為例。圖像的寬和高都為200，如果按照每一個(gè)像素為一行一列時(shí)。則該圖像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置信息為：

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

其中，公式中的 i 表示行數(shù)，j 表示列數(shù)。200為圖像的寬度。

demo代碼：

上面如果不理解， 對(duì)照代碼運(yùn)行一下試試?yán)斫獍桑?/p>

這次沒(méi)能為粒子加上炫酷的動(dòng)態(tài)效果~~下次補(bǔ)上，找一些算法就可以粒子動(dòng)起來(lái)的，有興趣可以做做看~

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助

整個(gè)效果的功能都完成了

如果大家想學(xué)習(xí)canvas，JavaScript，可以加群：230354270 群里面有每天都會(huì)上傳視頻供大家學(xué)習(xí)，歡迎學(xué)習(xí)交流的小伙伴過(guò)來(lái)一起學(xué)習(xí)交流！

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號(hào)：‘HTML網(wǎng)頁(yè)’關(guān)注后回復(fù)可以領(lǐng)取一套完整的學(xué)習(xí)視頻！