我正在尝试使用 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 间隔,以便点的间隔显得更均匀。感谢您的浏览!
最佳答案
要获得完整的圆圈,您确实需要使用以下 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 });
}
关于javascript - 在半圆内绘制点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34050116/