jQuery10种不同的水球效果

Waterbubble 是一款基于 jQuery 和 Canvas 实现的动态水球图插件，你可以通过它来显示各种进度情况。

淘建站为您提供更多_其它特效_jQuery插件_canvas_water，在此特别感谢您对我们的支持与厚爱！

生成水球的canvas

<canvas id="sucaiq"></canvas>

演示一：默认效果

$('#sucaiq').waterbubble();

演示二：设置水球半径

$('#sucaiq').waterbubble({
    radius: 200
});

演示三：边框宽度

$('#sucaiq').waterbubble({
    lineWidth: 10
});

演示四：数据多少

$('#sucaiq').waterbubble({
    data: 0.3
});

演示五：水球颜色

$('#sucaiq').waterbubble({ waterColor: 'rgba(0, 0, 0, 1)' });

演示六：显示文本

$('#sucaiq').waterbubble({
    txt: '50%'
});

演示七：文本颜色

$('#sucaiq').waterbubble({
    txt: '50%',
    textColor: 'rgba(0, 0, 0, 0.8)'
});

演示八：设置字体

$('#sucaiq').waterbubble({
    txt: 'sucaiq',
    font: 'bold 25px arial'
});

演示九：是否显示波纹

$('#sucaiq').waterbubble({
    wave: false
});

演示十：是否显示动画

$('#sucaiq').waterbubble({
    animation: false
});