zkPCproject/public/cdn/js/circliful.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(factory);// AMD
    } else if (typeof exports === 'object' && typeof module !== 'undefined') {
        module.exports = factory(); // CommonJS
    } else {
        window.Progressbar = factory(); // Browser globals
    }
}(this, function () {
    function Progressbar(options){
        this.id = options.id;
        this.value = options.value || 0;
        this.width = options.width || 200;
        this.height = options.height || 200;
        this.bgColor = options.bgColor || '#F0ECEC';
        this.barColor = options.barColor || '#F9A825';
        this.fontColor = options.fontColor || '#606266';
        this.text = options.text || '%'
        if(options.init){
            this.init();
        }
    }
    Progressbar.prototype.init = function(){
        console.log(this.id, '创建的id')
        var canvas = document.getElementById(this.id);
        console.log(canvas, '找没找到', document.getElementById(this.id))
        if(!canvas.getContext) {
            throw new Error('your browser does not support canvas')
        }

        if(!this.id){
            throw new Error('your need pass id ')
        }

        var width = parseInt(this.width);
        var height = parseInt(this.height);
        canvas.setAttribute('width',width);
        canvas.setAttribute('height',height);

        var ctx = canvas.getContext("2d");

        var startAngle = 3 / 2 * Math.PI;
        var percentage = 0;
        var diffAngle = 0;
        var cx = width / 2;
        var cy = height / 2;
        var timer = setInterval(draw, 50);
        var value = this.value;
        var bgColor = this.bgColor;
        var barColor = this.barColor;
        var fontColor = this.fontColor;
        var text = this.text;

        function draw(){
            diffAngle = (percentage / 100) * Math.PI * 2;

            //清除矩形区域
            ctx.clearRect(0, 0, width, height);

            ctx.beginPath();

            //设置线段宽度
            ctx.lineWidth = 15;

            //绘制圆
            ctx.arc(cx, cy, 50, 0, 2 * Math.PI, false);

            //设置填充色
            ctx.fillStyle = '#FFF';
            ctx.fill();

            //绘制图形轮廓
            ctx.strokeStyle = bgColor;
            ctx.stroke();

            //绘制百分比进度
            ctx.beginPath();
            ctx.arc(cx, cy, 50, startAngle, diffAngle + startAngle, false);
            ctx.strokeStyle = barColor;
            ctx.stroke();

            //绘制百分比文字
            ctx.fillStyle = fontColor;
            ctx.textAlign = 'center';
            ctx.font = '16px serif';
            ctx.fillText(percentage + text, cx, cy + 6);

            if (percentage >= value) {
                clearTimeout(timer);
            }

            percentage++;
        }
    }
    return Progressbar;
}));