如何在两个圆圈之间的随机位置绘制圆圈？

Question

我有两个圈子。一个是半径150，另一个是半径350。我想在150-350半径的空间之间放置圆圈数。它不应该叠加（覆盖）已经放置的其他圆圈。它应该在每次刷新时随机放置。有人可以给我一些如何在画布上做这个的想法/逻辑。的JavaScript。

[编辑]

1. 预定义所有圆的半径。

Answer 1

至于绘制实际图像，这取决于你，但这是你放置圆圈的方式：

首先，在0°和360°之间随机选择一个Θ。

然后为您的小圆圈选择半径r1，介于0和50之间（“轨道”的100像素宽度的一半）。

然后选择中心位置r2，介于150 + r1和350 - r1之间。

现在在polar coordinates中给出的位置（{Θ，r1）绘制圆半径r2。

Answer 2

演示：http://jsfiddle.net/m1erickson/aGq8p/

这里的诀窍是创建随机圆圈，但也要确保它们不会重叠以前创建的圆圈。

以下是带注释的代码：

function randomCircle(){

    // define random radius

    var radius=minCircle+Math.random()*(maxCircle-minCircle);

    // define random distance between inner/outer rings

    var distFromCenter=innerRadius+radius+Math.random()*(outerRadius-innerRadius-radius*2);

    // define random angle

    var angle=Math.random()*PI2;

    // calculate the x,y of the defined circle

    var x=cx+distFromCenter*Math.cos(angle);
    var y=cy+distFromCenter*Math.sin(angle);

    // check this new circle versus all previous random circles for a collision 

    var hit=false;
    for(var i=0;i<randomCircles.length;i++){
        var circle=randomCircles[i];
        var dx=circle.cx-x;
        var dy=circle.cy-y;
        var r=circle.radius+radius;
        if(dx*dx+dy*dy<=r*r){
            hit=true;
        }
    }

    // if no collision occurred, add this new circle to the existing circles array

    if(!hit){
        var color=randomColor();
        randomCircles.push({cx:x,cy:y,radius:radius,color:color}); 
    }

}