如何根据 JavaScript 中与头部圆的距离生成新的随机圆？

Question

我在 JavaScript 中的 canvas 范围内的随机位置画了一个圆圈。

我想在距离第一个圆的中心特定距离 (200) 的随机位置上再生成 2 个圆。

有一种方法可以生成新坐标直到距离等于200，但应该有更好的解决方案吧？

我怎样才能做到以下几点？

代码：

var x = getRandomInt(200, 800)
var y = getRandomInt(200, 400)
var r = 60
drawCircle (x, y, r)

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

function drawCircle(x, y, r) {  
    context.beginPath()
    context.arc(x, y, r, 0, 2 * Math.PI, false)
    context.fillStyle = "#fc3358"
    context.fill()
    context.closePath()
}

Answer 1

您可以使用毕达哥拉斯定理找出所有距离为 200 的点。你基本上是在寻找一个半径为 200 的圆。所以最后你会得到一个函数，你将那只小狗插入并为其分配随机值。看看距离公式，它可能会清楚这个概念。

Answer 2

您可以使用上面加布里埃尔指出的毕达哥拉斯定理。如果你不想计算所有点，你可以分配一组数字是随机的，然后你可以操纵定理计算第二个数字：b = Sqrt(c^2 - a^2)

Answer 3

要生成与中心点 (CX, CY) 距离为 R（此处为 200）的随机角度的点，请使用简单的三角公式：

Phi = Random * 2 * Math.PI; //Random in range 0..1
X = CX + Round(R * Cos(Phi));
Y = CY + Round(R * Sin(Phi));

如何根据 JavaScript 中与头部圆的距离生成新的随机圆？

How to generate new random circles based on distance from head circle in JavaScript?

javascript

random

geometry

computational-geometry

html5-canvas