HTML5キャンバスでバーの円を作成しますが、バーの間隔は不均一です

Question

円形のプログレスバーを作成しようとしています（これはバーではありません）。このカールの周りには、円に垂直な細い棒があります。今問題は、私のコードは、均一な間隔でバーを生成しないということです。

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

EDIT：ああ、またラインがアンチエイリアス処理されずここでは、コードとその結果の画像です。なぜなのかご存知ですか？ また、このプログレスバーは2つの部分で構成されていることを説明する必要があります。外側の円（提供された画像で見える）と内側の円。外側の円はパーセンテージの整数部分の量（すなわち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

は、ラインはあなたにそれがあなたの三角関数に関連していますという良い指標を与える規則的なパターン（あなたの例では5つのに近い領域）で遠く離れて、その後に近いとされています。あなたはほぼ正弦波をパターンで見ることができます。

いずれにしても、光線を描く数学にはいくつかのエラーがあります。この簡単な例を試してみてください。

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/