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,

          startTime:i*1000,

          endTime:(i+config.time)*1000

        }

      )

    }

    }

 声明可用的全局变量：保