https://www.xuanmo.xin/1187.html

JavaScript面向对象封装canvas环形进度条

发布于 分类: Html5 & CSS3案例 2 1824

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

canvas-2

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

obj:canvas对象(必填参数)

radius:圆形的半径(必填参数)

progress:进度条参数(必填参数)

color:3个参数,第一个是canvas底层圆形的颜色,第二个参数为进度条环形颜色,第三个参数为中间文字颜色(必填参数)

value:需要显示的字符串(选填参数,默认为没有文字只要百分比显示)

fontSize:文字的大小(选填参数,默认为20px)

lineWidth:canvas进度条线宽(选填参数,默认为10)

canvas-3

具体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展示

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

已经没有了!