Javascript 在HTML画布元素中定位圆的问题

下图是Alton Towers的Smiler主题化上的三个旋转圆盘的图片：

我的目标是在HTML画布上绘制最右边的微调器（红色圆圈），使用27个半径圆，半径从270线性减小到10（增量为10）。下面的代码是我提出的JavaScript代码

var num_circles = 27;
var incr = 10;
var margin = 10;
var wr = 10;
var drt = 0.95;
var boxSize = 40 * num_circles;
var half = boxSize / 2 + margin;

$(document).ready(function() {            
    var cv = document.getElementById("CV");
    $(cv).attr("width", boxSize + 2 * margin).attr("height", boxSize + 2 * margin);
    $("#ROTATOR").css("width", cv.width).css("height", cv.height);
    var ctx = cv.getContext("2d");
    ctx.clearRect(0, 0, cv.width, cv.height);

    var x = half, y = half;

    for (var i = 0; i < num_circles; i++)
    {
        var j = num_circles - i, r_inst = wr * j;
        ctx.beginPath();
        ctx.fillStyle = (!(i % 2) ? "#000000" : "#ffff88");
        console.log("x = " + (x - half + margin / 2) + ", y = " + (y - half - margin / 2) + ", r = " + r_inst);

        var offset_x = wr / 2 * Math.sin(incr * (num_circles - i - 1) * Math.PI / 180);
        var offset_y = wr / 2 * Math.cos(incr * (num_circles - i - 1) * Math.PI / 180);

        ctx.arc(x, y, r_inst, 0, 2 * Math.PI, false);
        // ctx.arc(x, y, r_inst, 0, 2 * Math.PI, false);
        ctx.fill();

        console.log("offset x = " + offset_x + ", offset y = " + offset_y + ", dist = " + Math.sqrt(Math.pow(offset_x, 2) + Math.pow(offset_y, 2)));
        x += offset_x;
        y += wr / 2 - offset_y;
    }
});

var num_circles=27；
var incr=10；
var保证金=10；
var-wr=10；
var-drt=0.95；
var boxSize=40*num_圆；
var half=箱型尺寸/2+裕度；
$（文档）.ready（函数（）{
var cv=document.getElementById（“cv”）；
$（cv）.attr（“宽度”，boxSize+2*边距）。attr（“高度”，boxSize+2*边距）；
$（“#旋转器”）.css（“宽度”，cv.width）.css（“高度”，cv.height）；
var ctx=cv.getContext（“2d”）；
ctx.clearRect（0，0，cv.width，cv.height）；
var x=一半，y=一半；
对于（变量i=0；i

我的代码的主要问题是内圈之间的间距太大：

---

如何修改此代码，使其绘制的图形更接近所讨论的微调器？更具体地说，我缺少什么可以使圆保持近似相切？

我尝试如下改变偏移：

var incr=13；
...
常数θ=增量*（j+Math.sqrt（j）+5）*Math.PI/180；
无功补偿x=wr/2*数学sin（θ）；
无功补偿y=wr/2*数学cos（θ）；

var num_circles=28；
var incr=13；
var保证金=10；
var-wr=10；
var-drt=0.95；
var boxSize=20*num_圆；
var half=箱型尺寸/2+裕度；
$（文档）.ready（函数（）{
var cv=document.getElementById（“cv”）；
$（cv）.attr（“宽度”，boxSize+2*边距）。attr（“高度”，boxSize+2*边距）；
$（“#旋转器”）.css（“宽度”，cv.width）.css（“高度”，cv.height）；
var ctx=cv.getContext（“2d”）；
ctx.clearRect（0，0，cv.width，cv.height）；
var x=一半，
y=一半；
对于（变量i=0；i

非常感谢！在那之后，我所需要做的就是将
wr/2
更改为
wr*drt
，它似乎起作用了。@ElEctric很高兴我能帮上忙！这很有趣：D