var progress = function() {
    var progress = {
        textheight: null,
        renderone: function(id, length, r, percent) {
            var canvas = document.getelementbyid(id);
            var context = canvas.getcontext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            var interval = setinterval(function() {
                    i++;
                    progress.render(context, length, r, i, percent);
                    if (i >= percent) {
                        clearinterval(interval)
                    }
                },
                10)
        },
        render: function(context, length, r, i, percent) {
            context.clearrect(0, 0, length, length);
            context.beginpath();
            var gradient = context.createlineargradient(length, 0, 0, 0);
            gradient.addcolorstop("0", "#ffffff");
            gradient.addcolorstop("1.0", "#ffffff");
            context.strokestyle = gradient;
            context.linewidth = r;
            context.arc(length / 2, length / 2, length / 2 - r, -0.5 * math.pi, -0.5 * math.pi + i * 0.02 * math.pi, false);
            context.stroke();
            context.closepath();
            context.beginpath();
            context.strokestyle = "#8d8d8d";
            context.linewidth = 2;
            context.fillstyle = "#ffffff";
            context.arc(length / 2, r, 0.6 * r, 0, 2 * math.pi, false);
            context.stroke();
            context.fill();
            context.closepath();
            context.beginpath();
            var radian = percent / 100 * 2 * math.pi - 0.5 * math.pi;
            var x = math.cos(radian) * (length / 2 - r) + length / 2;
            var y = math.sin(radian) * (length / 2 - r) + length / 2;
            context.arc(x, y, 0.6 * r, 0, 2 * math.pi, false);
            context.stroke();
            context.fill();
            context.closepath();
            context.beginpath();
            context.linewidth = 1;
            context.strokestyle = "blue";
            context.fillstyle = "#e5505c";
            context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * math.pi);
            context.fill();
            context.closepath();
            context.beginpath();
            context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑";
            //   context.fillstyle = "#ffffff";
            context.fillstyle = "red";
            var text = percent + "%";
            textwidth = context.measuretext(text).width;
            if (this.textheight == null) {
                var div = document.createelement("div");
                //   document.body.appendchild(div);
                div.innerhtml = text;
                div.style.fontsize = ((length / 2 - 2.5 * r) / 2) + "px";
                this.textheight = div.offsetheight;
                // div.parentnode.removechild(div)
            }
            textheight = this.textheight;
            context.filltext(text, (length - textwidth) / 2, length / 2 + textheight / 4);
            context.fill();
            context.closepath()
        }
    };
    return progress
};