以半圆形绘制点

我正在尝试使用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等），它可以只是一个乘法器，它将$ x间隔从0进一步减小，使得点间隔更均匀。

感谢您的期待！

来源

2015-12-02 Neil Hillman

为了得到一个完整的圆，你真的需要使用以下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 }); 

}

来源

2015-12-02 20:48:18

以半圆形绘制点

回答

相关问题