分享基于canvas的水球特效

最新推荐文章于 2022-06-08 14:38:25 发布

chichit58403

最新推荐文章于 2022-06-08 14:38:25 发布

阅读量420

点赞数

原文链接：https://my.oschina.net/zedwang/blog/1518165

版权

Home

https://github.com/zedwang/waterball

Demo

The component support AMD、CMD and standalone model

Install with standalone

<script src='/path/water-ball.min.js'></script>

// html
<div id='container'></div>
// js
 var wb = new WaterBall('container',{
        value:30,
        r:100,
        color:'#787878',
    });
    // update
    wb.setOptions({value:50})

Install with NPM

$ npm install waterball

This will install waterBall NPM packages.

Methods

setOptions(key,value)/setOptions(Object)

value 0~100

destroy()

destroy instance

Options

Field	Type	Default
fill	String/Array	`#fff`
waveStyle	String/Array	`['#5bf6a1','#2bdb72']`
waveWidth	Float	0.02
waveHeight	Int	8
speed	Float	.1
borderColor	String	`#2bdc76`
borderWidth	Int	2
value	Float	0
color	String	`#fff`
fontSize	String	`25px microsoft yahei`
textAlign	String	center