Waterpipe.js 是一个用于生成烟雾效果( HTML5 Canvas )背景的 jQuery 插件。

用法

1. 引入 jQuery 和 waterpipe.js

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

2. 使用 canvas 元素创建容器

<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。
numCircles int 1 圈数(烟雾)。
maxMaxRad int or ‘auto’ ‘auto’ 可用于更改圆半径大小
minMaxRad int or ‘auto’ ‘auto’ 可用于更改圆半径大小
minRadFactor int 0 它表示相对于最大可能的最小半径的大小。 整数从0到1。
iterations int 8 创建单个分形曲线时采用的细分步骤数。可以使用更多,但任何超过10(1024点)都会影响性能。
drawsPerFrame int 10 在定时器的每个刻度上绘制的曲线数
lineWidth number 2 行宽
speed int 1 绘图速度(定时器的计时单位为ms)
bgColorInner string ‘#ffffff’ 背景外部颜色以十六进制格式
bgColorOuter string ‘#666666’ 背景内部颜色以十六进制格式