插件描述：waterpipe.js是一個(gè)創(chuàng)建煙霧彌漫的背景,有多種效果可選擇，自定義參數(shù)效果還是挺酷的哦！

使用方法

1、包括jQuery和waterpipe.js

2、創(chuàng)建畫布元素內(nèi)包裝

Your?browser?does?not?support?HTML5?canvas.

3、創(chuàng)建畫布元素內(nèi)包裝var?smokyBG?=?$('#wavybg-wrapper').waterpipe({

//Default?values

gradientStart:?'#000000',

gradientEnd:?'#222222',

smokeOpacity:?0.1,

numCircles:?1,

maxMaxRad:?'auto',

minMaxRad:?'auto',

minRadFactor:?0,

iterations:?8,

drawsPerFrame:?10,

lineWidth:?2,

speed:?1,

bgColorInner:?"#ffffff",

bgColorOuter:?"#666666"

});

選項(xiàng)

選擇類型 ? ? ? ?默認(rèn)值

gradientStartstring'#000000'開始顏色的十六進(jìn)制格式。

gradientEndstring'#222222'漸變結(jié)束色十六進(jìn)制格式。

smokeOpacitynumber0.10.1號煙度0至1。.

numCirclesint1Number of circles (smokes).

maxMaxRadint or 'auto''auto'可以用來改變圓半徑的大小

minMaxRadint or 'auto''auto'可以用來改變圓半徑的大小

minRadFactorint0表示相對于最大可能的最小半徑大小。從0到1的整數(shù)。

iterationsint8The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas.

drawsPerFrameint10Number of curves to draw on every tick of the timer

lineWidthnumber2Line width

speedint1Drawing speed (tick of timer in ms)

bgColorInnerstring'#ffffff'背景外觀顏色的十六進(jìn)制格式

bgColorOuterstring'#666666'背景內(nèi)顏色的十六進(jìn)制格式

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html5 烟雾,jQuery烟雾背景发生器（HTML5 Canvas插件waterpipe.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。