整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
習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 群里面有每天都會上傳視頻供大家學習，歡迎學習交流的小伙伴過來一起學習交流！
D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做數據可視化的。
現在有一組數據， 【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】 ，你能一眼看出它們的大小關系嗎？當然這里的數據不算多，有那眼疾手快的家伙站出來說我能一眼看出來！但更直觀的是用圖形顯示，如下圖：
通過圖形的顯示，能很清楚地知道他們的大小關系。當然，D3能力遠不止如此，這只是一個很小的應用。把枯燥乏味復雜的數據，用簡單明了的圖形表示出來，這就是數據可視化。
D3 是一個開源項目，作者是紐約時報的工程師。D3 項目的代碼托管于 GitHub（一個開發管理平臺，目前已經是全世界最流行的代碼托管平臺，云集了來自世界各地的優秀工程師）。
在 GitHub 上最受關注的項目有哪些呢？
JQuery 的名聲夠大了，但排名第 6，D3 排名第 5。
學習 D3 最好的地方是： http://d3js.org/ ，當然里面都是英文的。
D3 是一個 JavaScript 函數庫，并不需要通常所說的“安裝”。它只有一個文件，在 HTML 中引用即可。有兩種方法：
（1）下載 D3.js 的文件: d3.zip
解壓后，在 HTML 文件中包含相關的 js 文件即可。
（2）還可以直接包含網絡的鏈接，這種方法較簡單：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
但使用的時候要保持網絡連接有效，不能再斷網的情況下使用。
下面是一個使用D3和CSS制作的光斑粒子交相輝映的動畫截圖，
動圖展示：
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class='container'></div> <script src="script.js"></script> </body> </html>
D3關鍵代碼如下：
const COUNT = 200;
d3.select('.container')
.selectAll('span')
.data(d3.range(COUNT))
.enter()
.append('span')
.style('--x', () => d3.randomUniform(1, 99)())
.style('--y', () => d3.randomUniform(1, 99)())
.style('--n', d => d)
.style('--dark-color', (d) => d3.color(`hsl(${70 + d * 0.1}, 100%, 50%)`))
CSS代碼由于太長，這里就不放上來了，需要完整CSS代碼的朋友可以留言或私信我，我看到之后會第一時間回復的。
anvas是為web創建動畫內容的一種令人興奮的新方法。使用它，您可以在web瀏覽器中僅使用HTML和JavaScript創建引人注目的動畫，而無需向web頁面添加過多的插件。
本文將重點介紹canvas元素，以及如何使用它來使用JavaScript創建動畫場景。
Canvas是在web頁面中創建自包含的、動畫內容的好方法，不需要任何額外的插件或下載。雖然瀏覽器還不是100%支持，但現在我們也是可以開始使用了，并以此尋找為我們的項目增加額外價值的方法。
ps：代碼中都有注釋了
作者也在學習當中，難免會有錯漏的地方，懇請讀者能給予意見或建議，謝謝！轉載請注明：[learnaLanguage_YiZhou_JavaScript：炫酷的粒子特效]
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
