Javascript 在曲线中显示svg元素

目前，我已将元素放置在直线上，因此

y

的所有元素都将是15（常数），x将不断增加，因此元素将在直线上。现在我需要在曲线中放置元素来实现它

请检查这个

我需要在曲线中显示元素，如下所示：

---

以下是我的想法。这是相当基本的三角学

我们从一些配置/设置开始：

// The centre of the big curve the dots sit on
var  curveX = 300;
var  curveY = 800;
// The radius of the big curve
var  curveRadius = 400;

// The radius of the dots
var  dotRadius = 20;

var  numDotsPerRow = 10;
var  numRows = 5;

我们必须沿着“大曲线”的圆周前进。所以第一个计算是点之间的角度

// The step in big-curve angle between the dots
var  stepAngle = Math.asin(dotRadius / curveRadius) * 2;

我们将使每行点居中，并使用对称性在循环中每次绘制两个点（左侧和右侧）。因此，每行从中心两侧的一半步距角开始

// Centre dots on each row start half this angle on either side of centre
var  startAngle = stepAngle / 2;

每行点都有一个循环

var  svg = document.getElementById("mysvg");

for (var j=0; j<numRows; j++)
{
   var  currentAngle = stepAngle / 2;

---

曲线图像-因此，当您翻页时，需要改变“cy”。这样做有什么问题？是的，我需要动态创建，所以我需要公式来找到每个元素的值cy。。

   for (var i=0; i<(numDotsPerRow/2); i++)
   {
      // The centre of the dot relative to the curve centre
      var  dx = curveRadius * Math.sin(currentAngle);
      var  dy = curveRadius * Math.cos(currentAngle);

      // Add dots to each side/half of curve
      makeDot(mysvg, curveX-dx, curveY-dy, dotRadius);
      makeDot(mysvg, curveX+dx, curveY-dy, dotRadius);

      currentAngle += stepAngle;
   }

   // Step the centre of the curve up by the diameter of a dot
   curveY -= dotRadius * 2;
}