在画布中随机生成一个对象

Question

如何在地图上逐个生成对象，而不会在HTML5 Canvas上占用相同的空间或重叠？

因此，圆圈在屏幕上随机生成并持续几秒钟，然后生成新圆圈。它们甚至可以在第一个圆圈被摧毁之前产生。但不是在同一时间。

这就是我现在所拥有的：http://jsfiddle.net/SamuraiFox/p9sDB/

<div id="circle" onclick="resize()"></div>

- ＆GT;我需要这个动画在圆形生成时播放，它应该在没有onclick的情况下播放......所以自动播放。

Answer 1

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

如果你有一个像这样形成的圆形对象数组：

var circles=[];

circles.push({
    x:x,
    y:y,
    radius:r,
    color:randomColor(),
    countdown:500+Math.random()*1000
});

然后您可以添加新的随机，非重叠的圆圈，如下所示：

var r=10+Math.random()*15;
var x=Math.random()*cw;
var y=Math.random()*ch;

// make sure new circle doesn't overlap any existing circles
while(true){
    var hit=0;
    for(var i=0;i<circles.length;i++){
        var circle=circles[i];
        var dx=x-circle.x;
        var dy=y-circle.y;
        var rr=r+circle.radius;
        if(dx*dx+dy*dy<rr*rr){ hit++; }
    }
    // new circle doesn't overlap any other, so break
    if(hit==0){break;}
    x=Math.random()*cw;
    y=Math.random()*ch;
}