Canvas---放大和缩小圆环插件_canvas 编辑圆改变半径-优快云博客

本文介绍了一个使用HTML5 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