整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，說起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世界的各種插件，請讀者關注小編，精彩評測不容錯過！
者：前端日志
轉發鏈接：https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ
習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 群里面有每天都會上傳視頻供大家學習，歡迎學習交流的小伙伴過來一起學習交流！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
