canvas制作圆形进度条（有动画效果）

先上效果：

image.png
查看演示
贴代码：
HTML

<div class="circleBar">
  <canvas class="circle" id="canvas1" width="100" height="100"></canvas>
</div>

JS

$(function () {
        new CircleBar();
    });
    function CircleBar() {
        this.data=null;
        this.$el=$(".circleBar");
        this.init();
    }
    CircleBar.prototype={
        init:function () {
            this.setData();
            this.create();
            this.bindEvent();
            this.renderBar();
        },
        //创建DOM
        create:function () {

        },
        //绑定事件
        bindEvent:function () {

        },
        //设置数据
        setData:function () {
            var barData=[this.getRandomInt(0,100)];
            this.data=barData;
        },
        //画圆
        renderBar:function () {
            function draw(context,i){
                // 大圆框
                context.beginPath();
                context.lineWidth = 1;
                context.arc(50,50,46,0,Math.PI*2);
                context.strokeStyle = "grey";
                context.stroke();
                // 大圆
                context.beginPath();
                var grd = context.createLinearGradient(15,15,80,80);
                grd.addColorStop(0,"#000");
                grd.addColorStop(1,"#f00");
                context.arc(50,50,38,0,Math.PI*2*(i/100));
                context.lineWidth = 10;
                context.strokeStyle = grd;
                context.lineCap = "round";
                context.stroke();

                // 小圆
                context.beginPath();
                context.arc(50,50,30,0,Math.PI*2);
                context.lineWidth = 1;
                context.strokeStyle = "grey";
                context.stroke();
                context.fillStyle = "white";
                context.fill();
                // 字
                context.beginPath();
                context.textBaseline = "middle";
                context.textAlign = "center";
                context.font = "20px Arial";
                context.fillStyle = "black";
                context.fillText(parseInt(i)+"%",50,50);
            }
            //duration画进度条的时间
            function animate(canvas,context,duration,progress) {
                var i = 0;
                var range=progress/duration/10;
                var timer = setInterval(function(){
                    if(i >= progress){
                        clearInterval(timer);
                    }
                    context.clearRect(0,0,canvas.width,canvas.height);
                    draw(context,i);
                    i=i+range;
                },50);
            }
            var self=this;
            var canvas = this.$el.find('canvas').get(0);
            var context = canvas.getContext("2d");
            animate(canvas,context,2.5,self.data[0]);
        },
        //得到一个两数之间的随机整数
        getRandomInt:function (min,max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min;
        }
    };