我正在尝试创建一个圆形进度条(尽管它不再是一个进度条，对吗？)。在这个圆周周围有垂直于圆的细条。现在的问题是，我的代码不会以均匀的间距生成条形图。这是代码和结果图像:

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.98% 中的 45)，内圈为百分比非整数部分的金额(即 45.98% 中的 98)。因此，您现在知道什么是 intCircle 和 floatCircle :)

最佳答案

看来您正在将学位传递给 Math.sin 和 Math.cos。这些函数需要弧度。例如，

// i degrees to radians.
Math.sin(i * (Math.PI / 180)); 

关于javascript - 使用 HTML5 canvas 创建一圈条形，但条形之间的空间不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16637185/