整合營(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í)視頻!


          主站蜘蛛池模板: 色窝窝无码一区二区三区| 亚洲第一区二区快射影院| 波多野结衣一区二区| 武侠古典一区二区三区中文| 国产日本亚洲一区二区三区| 综合久久一区二区三区| 风流老熟女一区二区三区| 国产福利日本一区二区三区| 久久精品国产一区| 色狠狠一区二区三区香蕉蜜桃 | 国产一区二区三区在线观看精品| 国产一区二区三区播放心情潘金莲| 一区二区免费视频| 国产亚洲一区二区精品| 国产99精品一区二区三区免费 | 日本不卡一区二区三区视频| 中文字幕一区二区在线播放| 小泽玛丽无码视频一区| 波多野结衣中文一区| 精品一区二区高清在线观看| 国产乱码精品一区二区三区四川| 无码喷水一区二区浪潮AV| 无码日韩人妻av一区免费| 国产精品一区二区av| 大伊香蕉精品一区视频在线| 精品乱子伦一区二区三区| 久久国产精品免费一区| 久久99精品免费一区二区| 成人精品视频一区二区三区不卡| 国产综合一区二区在线观看| 中文字幕精品无码一区二区三区| 在线精品国产一区二区三区 | 少妇一夜三次一区二区| 亚洲AV成人精品一区二区三区| 色欲AV蜜桃一区二区三| 国产成人一区二区三区电影网站| 精品亚洲福利一区二区| 日本韩国黄色一区二区三区| 久久精品国产一区二区三区| 消息称老熟妇乱视频一区二区| 午夜福利一区二区三区在线观看|