計算された円弧でstroke-linecap = "round"によって追加された余分なピクセルをどのように補正するのですか？

Question

私は6:15

hour * 15 = 90 
minutes * 0.25 = 3.75 
hour + minutes = 93.75 

で日の出の次の例を使用して、日の出と日没に基づいてアークを作成していここでは、経路を計算するために使用される関数です。

polarToCartesian: function (centerX, centerY, radius, angleInDegrees) { 
    var angleInRadians = (angleInDegrees - 90) * Math.PI/180.0 

    return { 
    x: centerX + (radius * Math.cos(angleInRadians)), 
    y: centerY + (radius * Math.sin(angleInRadians)) 
    } 
}, 
describeArc: function (x, y, radius, startAngle, endAngle) { 
    var start = this.polarToCartesian(x, y, radius, endAngle) 
    var end = this.polarToCartesian(x, y, radius, startAngle) 

    var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1' 

    var d = [ 
    'M', start.x, start.y, 
    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y 
    ].join(' ') 
    return d 
} 

そして、ここでSVGである私は、ストローク幅=「3」でストローク-このlinecap =「お尻」を使用している場合は、アークが私に午前6時15分に始まり見ることができます

<path id="sun_ring_start" :d="getArcs(27, 93.75, 0)" fill="none" stroke="yellow" stroke-width="3" stroke-linecap="round" /> 

スニペット時計の文字盤。 stroke-linecap = "round"をstroke-width = "3"に設定すると、円弧はstroke-linecap = "round"で追加された余分なピクセルのために6:15より早く開始します。

stroke-linecap = "round"で追加された余分なピクセルをどのように補正できますか？

Answer 1

丸いキャップの半径（線の半分の幅）が度に相当することを確認してください。その後、必要に応じて開始/終了角度から追加または削除します。

var strokeWidth = 3; 
var capSizeInDegrees = (strokeWidth/2) * 360/cirumference. 

必ずしも正確ではありませんが、必要に応じて十分に近いはずです。