Question

我正在尝试创建一个循环进度条（虽然它不再是一个条形图，不是吗？）。在这个cricle周围有垂直于圆圈的细条。现在的问题是，我的代码不会产生均匀间距的条形。这是代码和结果的图像： uneven perpendicular lines to the circle

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是什么：）

Answer 1

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

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

Answer 2

如果您以常规模式（示例中的五个接近区域）查看线条接近然后相隔很远的方式，则可以很好地指示它与您的trig函数相关。你几乎可以看到模式中的正弦波。

在任何情况下，绘制光线的数学都有一些误差。试试这个简化的例子：

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 barThickness = 2;

    context.lineWidth = barThickness;
    context.strokeStyle = circleBackground;


    var innerRadius = 30;
    var outerRadius = 80;
    var center = { x:50, y:50 };
    var percentDone = 60;
    var angleOfPercentDone = percentDone * 360 / 100;

    //rotate everything -90 degrees
    angleOfPercentDone -= 90;
    for(var angle = -90; angle < angleOfPercentDone; angle +=5)
    {
        //convert to radians
        var rad = angle * Math.PI/180;
        var c = Math.cos(rad);
        var s = Math.sin(rad);
        var innerPointX = center.x + (innerRadius * c);
        var innerPointY = center.y + (innerRadius * s);
        var outerPointX = center.x + (outerRadius * c);
        var outerPointY = center.x + (outerRadius * s);
        context.moveTo(innerPointX, innerPointY);
        context.lineTo(outerPointX, outerPointY);
        context.stroke();
    }
}

在此查看小提琴：http://jsfiddle.net/DXwrc/

使用HTML5画布创建一个条形圆，但条形之间的空间不均匀

2 个答案: