Xuanmo Blog

canvas制作环形进度条需要注意的地方，就是关于角度与百分比的转换，公式如下：

传参利用的是json键值对方式进行传递参数，总共支持7个参数，

obj：canvas对象（必填参数）

radius：圆形的半径（必填参数）

progress：进度条参数（必填参数）

color：3个参数，第一个是canvas底层圆形的颜色，第二个参数为进度条环形颜色，第三个参数为中间文字颜色（必填参数）

value：需要显示的字符串（选填参数，默认为没有文字只要百分比显示）

fontSize：文字的大小（选填参数，默认为20px）

lineWidth：canvas进度条线宽（选填参数，默认为10）

具体js代码如下：

function CanvasProgress(mJson) {
    this.ctx = mJson.obj.getContext('2d');
    this.w = mJson.obj.width;
    this.h = mJson.obj.height;
    this.progress = mJson.progress;
    this.color = mJson.color;
    this.Size = mJson.radius;
    this.f_size = mJson.fontSize || '20px';
    this.lineWidth = mJson.lineWidth || 10;
    this.value = mJson.value;
    this.deg = 0;
    this.new_deg = 0;
    this.dif = 0;
}
CanvasProgress.prototype.init = function () {
    var r = this.deg * Math.PI / 180;
    // 角度换成百分比
    var sText = parseInt(this.deg / 360 * 100) + '%';
    // 获得文字宽度
    var sText_w = this.ctx.measureText(sText).width;
    // 底层圆
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.ctx.beginPath();
    this.ctx.strokeStyle = this.color[0];
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.arc(this.w / 2, this.h / 2, this.Size, 0, Math.PI * 2, false);
    this.ctx.stroke();
    this.ctx.closePath();
    // 进度条圆
    this.ctx.beginPath();
    this.ctx.strokeStyle = this.color[1];
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.arc(this.w / 2, this.h / 2, this.Size, -90 * Math.PI / 180, r - 90 * Math.PI / 180, false);
    this.ctx.stroke();
    this.ctx.closePath();
    // 文字显示
    this.ctx.fillStyle = this.color[2];
    this.ctx.font = this.f_size + ' Microsoft Yahei';
    // 绘制文本
    if (this.value) {
        // 绘制中间线
        this.ctx.beginPath();
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = this.color[2];
        this.ctx.moveTo(this.w / 2 - 30, this.h / 2);
        this.ctx.lineTo(this.w / 2 + 30, this.h / 2);
        this.ctx.stroke();
        this.ctx.closePath();
        // 绘制文字
        this.ctx.fillText(this.value, this.w / 2 - this.ctx.measureText(this.value).width / 2, this.h / 2 + 25);
        // 绘制进度文字
        this.ctx.fillText(sText, this.w / 2 - sText_w / 2, this.h / 2 - parseInt(this.f_size) / 2);
    } else {
        this.ctx.fillText(sText, this.w / 2 - sText_w / 2, this.h / 2 + parseInt(this.f_size) / 2);
    }
}
CanvasProgress.prototype.draw = function () {
    // 百分比换成角度
    this.new_deg = Math.round(this.progress / 100 * 360);
    this.dif = this.new_deg - this.deg;
    var This = this;
    var play = setInterval(function () {
        if (++This.deg == This.new_deg) {
            clearInterval(play);
        }
        This.init();
    }, 1000 / This.dif);
}

使用方法：

var can = new CanvasProgress({
    "obj": canvas[0],
    "radius": 50,
    "progress": 36,
    "fontSize": "20px",
    "lineWidth": 10,
    "value": "PS",
    "color": ['#acacac', '#f247ae', '#f247ae']
});
can.draw();

DEMO展示