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

我正在尝试创建一个圆形progressbar（尽管它不再是一个bar了，是吗？）。在这个圆的周围有垂直于圆的细条。现在的问题是，我的代码没有以均匀的间距生成这些条。下面是代码和结果的图像：

函数MH5PB（canvasId，//用于绘制pb的画布的id
值，//表示进度的浮点值（例如：0.3444）
背景，//pb的背景色（例如：“#ffffff”）
circleBackground，//圆圈中条形图的背景色
整数颜色，//外圆（或整数圆）的颜色
floatColor//内圆（或浮动圆）的颜色
)
{
var canvas=document.getElementById（canvasId）；
var context=canvas.getContext（“2d”）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
变量半径=数学最小值（画布宽度、画布高度）/2；
var numberOfBars=72；
var barThickness=2；
//边界的边距，以及两个圆之间的空间
var margin=parseInt（半径/12.5）>=2？parseInt（半径/12.5）：2；
//int圆和float圆的厚度
var circleThickness=parseInt（（半径/5）*2）；
//整数圆的外半径
var intOuterRadius=半径-边距；
//int圆的内半径
var intInnerRadius=半径-边缘-圆厚度；
//浮动圆的外半径
var floatOuterRadius=半径-边缘-圆厚度；
//浮动圆的内径
var floatInnerRadius=floatOuterRadius-圆厚度；
//画一条横线，每一个度数都对应一个度数
var intCircleDegreeStep=5；
//（（2*Math.PI*intOuterRadius）/（barThickness+10））//
//该区域是所需钢筋的总数//
//填充每个条之间的intCircle.1px空间//
var floatCircleDegreeStep=360/（（2*Math.PI*floatOuterRadius）/（barThickness+10））；
context.lineWidth=barThickness；
context.strokeStyle=圆形背景；
//画外圆的背景
对于（i=90；i<450；i+=intCircleDegreestp）
{
//因为我们想从顶部开始，然后顺时针移动，所以我们必须映射度
//循环中
cxOuter=数学地板（输入半径*数学cos（i）+半径）；
cyOuter=数学地板（intOuterRadius*Math.sin（i）+半径）；
cxInner=数学地板（内部半径*数学cos（i）+半径）；
cyInner=数学地板（intinerradius*数学sin（i）+半径）；
context.moveTo（cxOuter、cyOuter）；
lineTo（cxInner、cyInner）；
stroke（）；
}
}

编辑：哦，而且这些线也没有抗锯齿。你知道为什么吗？

---

我还应该解释一下，这个progressbar由两部分组成。外圈（在提供的图像中可见）和内圈。外圈是百分比的整数部分的数量（即45分之45.98%），内圈是百分比的非整数部分的数量（即98分之45.98%）。因此，您现在知道什么是intCircle和floatCircle:）

似乎您正在将学位传递给Math.sin和Math.cos。这些函数期望弧度。比如说,

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

---

如果你观察这些线在规则模式下（在你的例子中有五个闭合区域）是近距离还是远距离的，这给你一个很好的指示，它与你的三角函数有关。你几乎可以在图案中看到正弦波

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

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();
    }
}

函数MH5PB（canvasId，//用于绘制pb的画布的id
值，//表示进度的浮点值（例如：0.3444）
背景，//pb的背景色（例如：“#ffffff”）
circleBackground，//圆圈中条形图的背景色
整数颜色，//外圆（或整数圆）的颜色
floatColor//内圆（或浮动圆）的颜色
)
{
var canvas=document.getElementById（canvasId）；
var context=canvas.getContext（“2d”）；
var barThickness=2；
context.lineWidth=barThickness；
context.strokeStyle=圆形背景；
var内半径=30；
var outerRadius=80；
变量中心={x:50，y:50}；
var percentDone=60；
var Angleof percentDone=完成百分比*360/100；
//将所有物体旋转90度
百分比的角度-=90；
对于（变量角度=-90；角度<百分比角度；角度+=5）
{
//换算成弧度
var rad=角度*Math.PI/180；
var c=数学cos（rad）；
var s=数学sin（rad）；
var innerPointX=中心点x+（内半径*c）；
var innerPointY=中心.y+（内半径*s）；
var outerPointX=center.x+（outerRadius*c）；
var outerPointY=center.x+（outerRadius*s）；
moveTo（innerPointX，innerPointY）；
lineTo（outerPointX，outerPointY）；
stroke（）；
}
}

---

在这里查看小提琴：

这里只是一个小小的猜测：你的酒吧数量可能不受欢迎的东西，所以它凝聚他们产生一个良好的循环？谢谢你的关心，伊恩。嗯，我不确定。我怀疑这和正弦和余弦函数有关。由于它们产生一个双倍值，因此添加到下一个坐标的量是不均匀的。但我不知道如何修复它：D顺便说一句，谢谢你的编辑；）我以前从未在JS中画过任何东西，所以很遗憾，我在这里帮不了什么忙。休息

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();
    }
}