如何在两个圆之间的任意位置绘制圆？

Question

我有两个圈子。 一种半径为150，另一种半径为350。 我想在150-350半径的空间之间放置圆数。 它不应该在已经放置的其他圆上过度放置（覆盖）。 应该在每次刷新时随机放置它。 可以请一个人给我关于如何在画布上执行此操作的想法/逻辑。 的JavaScript。

[编辑]

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

Answer 1

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

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

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

然后在150 + r1和350- r1之间选择一个中心位置r2 。

现在在由（Θ， r2 ）在极坐标中给定的位置绘制一个圆半径r1 。

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}); 
    }

}