jQuery烟雾背景发生器（HTML5 Canvas插件waterpipe.js

 查看演示  website  立即下载

使用方法

1、包括jQuery和waterpipe.js

<script src="lib/jquery-1.11.0.min.js"></script>
<script src="waterpipe.js"></script>

2、创建画布元素内包装

<div id="wavybg-wrapper" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>

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"
});

选项

选择类型        默认值

gradientStart string '#000000' 开始颜色的十六进制格式。

gradientEnd string '#222222' 渐变结束色十六进制格式。

smokeOpacity number 0.1 0.1号烟度0至1。.

numCircles int 1 Number of circles (smokes).

maxMaxRad int or 'auto' 'auto'可以用来改变圆半径的大小

minMaxRad int or 'auto' 'auto'可以用来改变圆半径的大小

minRadFactor int 0 表示相对于最大可能的最小半径大小。从0到1的整数。

iterations int 8 The 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.

drawsPerFrame int 10 Number of curves to draw on every tick of the timer

lineWidth number 2 Line width

speed int 1 Drawing speed (tick of timer in ms)

bgColorInner string '#ffffff' 背景外观颜色的十六进制格式

bgColorOuter string '#666666' 背景内颜色的十六进制格式

PREVIOUS:
NEXT:
jquery幻灯片插件slidr.js
jQuery进度条插件NUMBERPROGRESSBAR