</JavaScript>纯JS环形进度条生成插件

最新推荐文章于 2024-08-22 09:56:11 发布

daveswong

最新推荐文章于 2024-08-22 09:56:11 发布

阅读量357

点赞数

文章标签： canvas js html javascript vue

本文链接：https://blog.csdn.net/daveswong/article/details/115170215

版权

本文介绍了一款使用JavaScript编写的环形进度条插件，通过HTML和JS代码实现，适用于Vue等前端框架。详细代码和注释使得理解和应用更为简单。

摘要由CSDN通过智能技术生成

就是用来生成这样的效果

先PO上代码，回头再详细解释吧，其实注释里面已经很详细了

// CircleBarBuilder.js
// 环形进度条生成插件
;
(function (global, undefined) {
     
    "use strict" //使用js严格模式检查，使语法更规范
    var _global;
    //定义一些默认参数
    var _options = {
     
        // 动画选项，使用每帧增加的百分比调整动画速度，默认 2.5 即每帧增加 2.5%，设置为 0 或 false 关闭动画
        animation: 2.5,
        // 总值，如果显示百分比，但是传值使用绝对值，则需要指定一个 100% 的绝对值
        total: 100,
        // true 显示百分比 || false 显示绝对值
        showPercent: true,
        // 如果以绝对值显示可以为数字添加单位符号后缀
        valueSymbol: '',
        // 数字格式化选项，默认保留小数点后2位
        fiexd: 2,
        // 样式
        style: {
     
            // 线宽
            circleWidth: 10,
            // 进度条颜色
            circleColor: "#10aeff",
            // 进度条背景颜色，设置为 false 时不显示
            circleBackground: '#eee',
            // 值文本颜色
            valueColor: "#777",
            // 标签文本颜色
            lableColor: "#777",
            // 字体，不能设置文字大小
            font: "'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif",
            // 进度条渐变设置，设置渐变以后会使 circleColor 选项失效
            gradient: false // 进度条渐变设置，设置渐变以后会使 circleColor 选项失效
        },
        rotate: 0, // 旋转，只旋转进度条，文本不旋转
        reverse: false // 反方向，顺时针还是逆时针
    }
    // api 实例
    var apiInstance;
    // 定义 api
    var _plugin_api = function (options) {
     
        // api 实例化，可以在 api 以外的函数中调用 api
        apiInstance = this;
        // 合并默认参数
        this.options = mergeObj(options, _options)
        // 设置旋转角度，既 2 * 旋转百分比
        this.options.rotate = this.options.rotate / 180;
        // 绘制函数
        this.draw = function (value, canvas, label = undefined) {
     
            // 获取画布
            var canvas = document.getElementById(canvas);
            // 获取 context
            var context = canvas.getContext("2d");
            if (!this.options.animation) {
     
                // 静态绘制
                drawArcBg(context); // 绘制进度条背景
                drawLabel(label, context); // 绘制标签
                drawArc(getPercent(value), context); // 绘制进度条
                drawValueTxt(value, context);
            } else {
     
                // 使用动画绘制
                // 设置自增变量，百分比
                var increment =