canvas实现扩散涟漪效果

涟漪效果"/>

canvas实现扩散涟漪效果

实现思路：

canvas 画圆，通过改变圆的半径及其透明度实现涟漪效果。

实现效果如下：

代码实现：

涟漪配置：

let config = {
'cut': 0.2,
'startRadius': 5, //起始半径
'haloRadius': 25, //扩散半径
'times': 3, //次数
'stepTime': 2, //间隔时间
'stroke': 'RGBA(255,185,0,0.5)', //线的颜色
'color': '#ffcb56', //颜色
'time': 3, //扩散时间2s
}

 根据扩散次数初始化圆信息 如下：记录圆半径、开始瞬间、结束瞬间。

function getCirlInfo(config,cirlInfo){      for(let i=0;i<config.times;i++){      cirlInfo.push(        {          radius:config.startRadius,          s