jQuery10种不同的水球效果

生成水球的canvas

<canvas id="sucaihuo"></canvas>

演示一：默认效果

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

演示二：设置水球半径

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

演示三：边框宽度

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

演示四：数据多少

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

演示五：水球颜色

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

演示六：显示文本

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

演示七：文本颜色

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

演示八：设置字体

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

演示九：是否显示波纹

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

演示十：是否显示动画

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