Canvas + JavaScript 制作圖片粒子效果

習(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畫布上制作的。將圖片制作成粒子效果相對(duì)而言是比較簡(jiǎn)單的。重點(diǎn)了解兩個(gè)知識(shí)點(diǎn)即可

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

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

參數(shù)說(shuō)明：x，y為畫布上的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í)視頻！

3 是什么？

D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽名字有點(diǎn)抽象，說(shuō)簡(jiǎn)單一點(diǎn)，其實(shí)就是一個(gè) JavaScript 的函數(shù)庫(kù)，使用它主要是用來(lái)做數(shù)據(jù)可視化的。

為什么要數(shù)據(jù)可視化？

現(xiàn)在有一組數(shù)據(jù)，【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】，你能一眼看出它們的大小關(guān)系嗎？當(dāng)然這里的數(shù)據(jù)不算多，有那眼疾手快的家伙站出來(lái)說(shuō)我能一眼看出來(lái)！但更直觀的是用圖形顯示，如下圖：

通過(guò)圖形的顯示，能很清楚地知道他們的大小關(guān)系。當(dāng)然，D3能力遠(yuǎn)不止如此，這只是一個(gè)很小的應(yīng)用。把枯燥乏味復(fù)雜的數(shù)據(jù)，用簡(jiǎn)單明了的圖形表示出來(lái)，這就是數(shù)據(jù)可視化。

D3 有多受歡迎

D3 是一個(gè)開源項(xiàng)目，作者是紐約時(shí)報(bào)的工程師。D3 項(xiàng)目的代碼托管于 GitHub（一個(gè)開發(fā)管理平臺(tái)，目前已經(jīng)是全世界最流行的代碼托管平臺(tái)，云集了來(lái)自世界各地的優(yōu)秀工程師）。

在 GitHub 上最受關(guān)注的項(xiàng)目有哪些呢？

JQuery 的名聲夠大了，但排名第 6，D3 排名第 5。

怎么學(xué)習(xí)和使用 D3

學(xué)習(xí) D3 最好的地方是： http://d3js.org/ ，當(dāng)然里面都是英文的。

D3 是一個(gè) JavaScript 函數(shù)庫(kù)，并不需要通常所說(shuō)的“安裝”。它只有一個(gè)文件，在 HTML 中引用即可。有兩種方法：

（1）下載 D3.js 的文件: d3.zip

解壓后，在 HTML 文件中包含相關(guān)的 js 文件即可。

（2）還可以直接包含網(wǎng)絡(luò)的鏈接，這種方法較簡(jiǎn)單：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

但使用的時(shí)候要保持網(wǎng)絡(luò)連接有效，不能再斷網(wǎng)的情況下使用。

一個(gè)更誘人的D3例子

下面是一個(gè)使用D3和CSS制作的光斑粒子交相輝映的動(dòng)畫截圖，

動(dòng)圖展示：

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關(guān)鍵代碼如下：

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代碼由于太長(zhǎng)，這里就不放上來(lái)了，需要完整CSS代碼的朋友可以留言或私信我，我看到之后會(huì)第一時(shí)間回復(fù)的。

anvas是為web創(chuàng)建動(dòng)畫內(nèi)容的一種令人興奮的新方法。使用它，您可以在web瀏覽器中僅使用HTML和JavaScript創(chuàng)建引人注目的動(dòng)畫，而無(wú)需向web頁(yè)面添加過(guò)多的插件。

本文將重點(diǎn)介紹canvas元素，以及如何使用它來(lái)使用JavaScript創(chuàng)建動(dòng)畫場(chǎng)景。

代碼如下：

Canvas是在web頁(yè)面中創(chuàng)建自包含的、動(dòng)畫內(nèi)容的好方法，不需要任何額外的插件或下載。雖然瀏覽器還不是100%支持，但現(xiàn)在我們也是可以開始使用了，并以此尋找為我們的項(xiàng)目增加額外價(jià)值的方法。

ps：代碼中都有注釋了

運(yùn)行效果如下：

作者也在學(xué)習(xí)當(dāng)中，難免會(huì)有錯(cuò)漏的地方，懇請(qǐng)讀者能給予意見或建議，謝謝！轉(zhuǎn)載請(qǐng)注明：[learnaLanguage_YiZhou_JavaScript：炫酷的粒子特效]

在線咨詢

上一篇：前端系列教程-JavaScript在網(wǎng)頁(yè)動(dòng)畫中的使用
下一篇：10款精美的HTML5圖片輪播動(dòng)畫+打包源碼下載

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商