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

使用方法

1、包括jQuery和waterpipe.js

2、創建畫布元素內包裝

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

3、創建畫布元素內包裝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"

});

選項

選擇類型 ? ? ? ?默認值

gradientStartstring'#000000'開始顏色的十六進制格式。

gradientEndstring'#222222'漸變結束色十六進制格式。

smokeOpacitynumber0.10.1號煙度0至1。.

numCirclesint1Number of circles (smokes).

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

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

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

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'背景外觀顏色的十六進制格式

bgColorOuterstring'#666666'背景內顏色的十六進制格式

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。