Canvas---放大和缩小圆环插件

最近小组招新，需要一个小型的动画，就是在第一页会有个放大和缩小的圆环。

主要用到的知识就是 canvas，看一下源码，内部注释比较清晰：

/*   *  selector:  canvas元素选择器   *  x:绘制的圆形x轴位置   *  y:绘制的圆y轴位置   *  r:绘制圆的半径   *  outColor: 外部圆颜色   *  innerColor:内部圆颜色   *  enlarge: 首次是放大还是缩小 默认缩小   *  timer: 变化速度  默认值 100   * */function animationBall(selector, x, y, r, outColor, innerColor, enlarge, timer) {    var canvas = document.querySelector(selector)    var context = canvas.getContext('2d')    var flag = enlarge    timer = timer || 100    var bR = r // 获取初始化外圆半径  为后面进行比较    // 创建内圆和外圆    function createBall(r) {        context.lineWidth = 0.3 * r //线条宽度        ball(r, outColor)        ball(r * 0.5, innerColor)    }    // 根据传入的 半径和颜色  画出圆环    function ball(r, color) {        context.beginPath()        context.arc(x, y, r, 0, Math.PI * 2, true)        context.strokeStyle = color        context.stroke()        context.closePath()    }    /*  清除画布指定区域内容*/    function clearRect(r) {        var w = 0.3 * r        var distance = (r + w / 2)        context.clearRect(x - distance, y - distance, distance * 2, distance * 2)    }    /* 定时器  画圆     *修改时间可以改变发生变化     */    setInterval(function () {        if (r >= bR * 2 || r <= 0.5 * bR) {            // r = bR            flag = !flag        }        clearRect(r + 2)        if (flag) {            createBall(r++)        }        else {            createBall(r--)        }    }, timer)}

项目地址：https://github.com/Sir814/plugin/tree/master/plugins/canvas/%E5%9C%86%E7%8E%AF