javascript - 在半圆内绘制点

Question

我正在尝试使用 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 数学，并且正在努力解决这个问题)...

有人可以帮我调整这段代码，使输出点放置得更均匀吗？

PS。它不必完全准确(使用 SIN 和 COS 等)，它可以只是一个乘数，从 0 开始减少 $x 间隔，以便点的间隔显得更均匀。

感谢您的浏览!

Answer 1

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

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

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

其中t是以弧度表示的 Angular ，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 });

}