javascript - 在 HTML Canvas 元素中定位圆圈的问题

Question

下图是奥尔顿塔斯迈勒主题的三个旋转圆盘的图片:



我的目标是在 HTML Canvas 上绘制最右边的微调器(用红色圈出的那个)，使用 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;
    }
});

我的代码的主要问题是内圈间隔太远:



我如何修改此代码，使其绘制的图形更接近相关的微调器？更具体地说，我错过了什么可以让圆圈保持接近相切？

Answer 1

我尝试如下改变偏移量:

var incr = 13;
...
const theta = incr * (j + Math.sqrt(j) + 5) * Math.PI / 180;
var offset_x = wr / 2 * Math.sin(theta);
var offset_y = wr / 2 * Math.cos(theta);

var num_circles = 28;
var incr = 13;
var margin = 10;
var wr = 10;
var drt = 0.95;
var boxSize = 20 * 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);
    const theta = incr * (j + Math.sqrt(j) + 5) * Math.PI / 180;
    var offset_x = wr / 2 * Math.sin(theta);
    var offset_y = wr / 2 * Math.cos(theta);

    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 - x, 2) + Math.pow(offset_y - y, 2)));
    x += offset_x;
    y += wr / 2 - offset_y;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="CV"></canvas>