function MH5PB(canvasId,//the id of the canvas to draw the pb on
                value,//a float value,representing the progress(ex: 0.3444)
                background,//the background color of the pb(ex: "#ffffff")
                circleBackground,//the background color of the bars in the circles
                integerColor,//the color of the outer circle(or the int circle)
                floatColor          //the color of the inner circle(or the float circle)
                )
{
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var radius = Math.min(canvasWidth,canvasHeight) / 2;
    var numberOfBars = 72;
    var barThickness = 2;

    //margin from the borders,and also the space between the two circles
    var margin = parseInt(radius / 12.5) >= 2 ? parseInt(radius / 12.5) : 2; 

    //the thickness of the int circle and the float circle
    var circleThickness = parseInt((radius / 5) * 2);

    //the outer radius of the int circle
    var intOuterRadius = radius - margin;
    //the inner radius of the int circle
    var intInnerRadius = radius - margin - circleThickness;

    //the outer radius of the float circle
    var floatOuterRadius = intOuterRadius - margin - circleThickness;
    //the inner radius of the float circle
    var floatInnerRadius = floatOuterRadius - circleThickness;

    //draw a bar,each degreeStep degrees
    var intCircleDegreeStep = 5;
                                    // ((2 * Math.PI * intOuterRadius) / (barThickness + 10)) //
                                    //  this area is the total number of required bars  //
                                    //  to fill the intCircle.1px space between each bar//
    var floatCircleDegreeStep = 360 / ((2 * Math.PI * floatOuterRadius) / (barThickness + 10));        

    context.lineWidth = barThickness;
    context.strokeStyle = circleBackground;
    //draw the bg of the outer circle
    for(i = 90; i < 450; i+=intCircleDegreeStep)
    {
        //since we want to start from top,and move cw,we have to map the degree
        //in the loop
        cxOuter = Math.floor(intOuterRadius * Math.cos(i) + radius);
        cyOuter = Math.floor(intOuterRadius * Math.sin(i) + radius);
        cxInner = Math.floor(intInnerRadius * Math.cos(i) + radius);
        cyInner = Math.floor(intInnerRadius * Math.sin(i) + radius);
        context.moveTo(cxOuter,cyOuter);
        context.lineTo(cxInner,cyInner);
        context.stroke();
    }
}

编辑：哦,而且行也没有消除锯齿.你知道为什么吗？
我还应该解释一下,这个进度条由两部分组成.外圈(在提供的图像中可见)和内圈.外圆是百分比的整数部分的量(即45在45.98％中的45),内圆是百分比的非整数部分的量(即,在45.98％中为98).因此,您现在知道intCircle和floatCircle是什么:)