gpt4 book ai didi

javascript - 在半圆内绘制点

转载 作者:行者123 更新时间:2023-11-27 23:37:00 26 4
gpt4 key购买 nike

我正在尝试使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com