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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          好神奇!使用jquery.particleground.js制作絢麗的粒子背景

          家好,說(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ò)!


          者:前端日志

          轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ

          習(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í)視頻!


          主站蜘蛛池模板: 色一情一乱一伦一区二区三区| 日日摸夜夜添一区| 久久久综合亚洲色一区二区三区| 3d动漫精品成人一区二区三| 天天看高清无码一区二区三区| 人妻久久久一区二区三区 | 精品一区二区三区电影| 色狠狠AV一区二区三区| 丰满人妻一区二区三区视频53| 无码日韩精品一区二区免费| 国产精品视频一区二区噜噜| 高清一区二区三区视频| 乱码人妻一区二区三区| 国产AV午夜精品一区二区入口| 国产在线一区二区杨幂| 日韩国产免费一区二区三区| 久久99国产精一区二区三区| www一区二区www免费| 国产三级一区二区三区| 成人精品视频一区二区三区尤物| 亚洲午夜一区二区电影院| 国产一区二区三区不卡观| 97久久精品午夜一区二区 | 无遮挡免费一区二区三区| 尤物精品视频一区二区三区| 亚洲av无码片区一区二区三区| 精品国产一区二区三区久久| 99国产精品一区二区| 国产一区二区四区在线观看| 香蕉视频一区二区三区| 国产福利一区二区在线视频| 日本强伦姧人妻一区二区| 精品视频一区二区三区在线播放| 成人丝袜激情一区二区| 无码人妻精一区二区三区| 久久久国产精品无码一区二区三区| 亚洲中文字幕在线无码一区二区| 色窝窝无码一区二区三区成人网站 | 无码福利一区二区三区| 国产成人久久精品区一区二区| 在线播放国产一区二区三区 |