Canvas + JavaScript 製作圖片粒子效果

學習canvas，javascript的小夥伴，可以跟著我這篇文章的思路一起做一個小效果出來，程式碼都齊全了。

首先看一下源圖和轉換成粒子效果的對比圖：

左側圖片為源圖，右側圖片為粒子效果圖。該效果是在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，可以加群： 640633433群裡面有每天都會上傳視訊供大家學習，歡迎學習交流的小夥伴過來一起學習交流！

寫在最後：

很多人都知道我是學全棧的，都天真的以為我有全套的前端、網頁製作等視訊學習資料。我想說你們是對的，我的確有前端的全套視訊資料。
如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端EDU’關注後回覆可以領取一套完整的學習視訊！