creazione di un cerchio di barre con tela HTML5, ma lo spazio tra le barre non è uniforme

Question

Sto provando a creare una barra di avanzamento circolare (anche se non sarebbe più una barra, vero?). Intorno a questo cricle ci sono barre sottili perpendicolari al cerchio. Ora il problema è che il mio codice non genera barre in una spaziatura uniforme. Ecco il codice e l'immagine del risultato:

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: Oh, e anche le linee non sono anti-aliasing. Sai perché? Devo anche spiegare che questa barra di avanzamento è composta da due parti. Un cerchio esterno (visibile nell'immagine fornita) e un cerchio interno. Il cerchio esterno è la quantità della parte intera della percentuale (cioè 45 nel 45,98%) e il cerchio interno è la quantità della parte non intera della percentuale (cioè 98 nel 45,98%). Quindi ora sai cosa sono intCircle e floatCircle :)

Answer 1

Sembra che stai passando dei gradi a Math.sin e Math.cos. Queste funzioni si aspettano i radianti. Ad esempio,

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

Answer 2

Se si guarda al modo in cui le linee sono vicini e quindi lontani in una struttura regolare (cinque stretti aree tuo esempio) che fornisce una buona indicazione che è legato alle funzioni trigonometriche. Puoi quasi vedere l'onda sinusoidale nello schema.

In ogni caso, la matematica per disegnare i raggi ha alcuni errori. Prova questo esempio semplificato:

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

Visualizza il violino qui: http://jsfiddle.net/DXwrc/