javascript - 在半圆上绘制点

我正在尝试使用JavaScript绘制均匀分布在半圆中的点。

到目前为止，我已经计算出了基于X坐标来计算Y坐标的公式，该公式产生了一个半圆。问题是，因为我的X坐标是有规律的间隔，所以这些点在顶点处显得更靠近在一起，而在圆弧的两端（在某种抛物线形的配置中）间隔更大。我想产生的是均匀分布的点，例如钟面上的分钟。

到目前为止，这是我的代码：

$radius = 200;
for ($i = -10; $i <= 10; $i++) {
    $pos_x = $i * 20;
    $pos_y = Math.round( Math.sqrt( Math.pow($radius,2) - Math.pow($pos_x,2) ) + $radius );
}

参见我的JSfiddle的可视示例：https://jsfiddle.net/7Lbqhtme/2/

我认为我需要更改的只是$ pos_x上的一个乘数，以便间隔从您得到的0开始进一步减小（但是我只有GCSE Maths并为此而苦苦挣扎）...

有人可以帮我调整此代码，以便更均匀地放置输出点吗？

PS。它不一定是完全准确的（使用SIN和COS等），它可以是一个乘数，它会将$ x间隔从0进一步减小，从而使点显得更均匀。

感谢您的光临！

最佳答案

要获得一个完整的圆圈，您确实需要使用以下parametric equations来获取正确的x和y坐标：

x(t) = shift_x + r*Cos(t)

y(t) = shift_y + r*Sin(t)

其中，t是您的弧度角，r是圆的半径，shift允许在上方明智地使组件居中。对于均匀间隔的t，应该在中心点(shift_x,shift_y)周围获得均匀的间隔点。

用法示例：Your JS fiddle

$r = 200;
$step = Math.PI/20
for ($i = 0; $i <= 20; $i++) {

  $x = $r * Math.cos($step*$i);
  $y = $r * Math.sin($step*$i);
  $("#point_" + Math.round($i) ).css({ "left": $x + 300 , "bottom": $y-20 });

}