本文实例为大家分享了js实现固定区域内的不重叠随机圆，供大家参考，具体内容如下
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机
最近公司有一个需求就是在一个固定的区域（500x500）内显示10个圆，且半径固定，而且不重叠
因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。
不过其实也没有很难，处理好半径的最大值就好了。
效果图：
思路：
（固定半径）
step1：先在区域内生成一个随机的圆心坐标，
step2：然后拿一个固定半径（从大到小拿固定半径）
step3：判断圆心和半径是否合法（是否超边距，或者两个圆相交）
step4：如果不合法，重新执行step2和step3
step5：如果合法，记为一个新圆
step6：重复step1~5，直到生成10个圆
（随机半径）
step1：先在区域内生成一个随机的圆心坐标，
step2：根据圆心坐标，与其他圆比较，获取最短的圆心距减去比较圆的半径（圆心距-R n RnR_n）的值，作为新圆的半径(这样就会生成一个相切的圆)
step3：判断圆心和半径是否合法（是否超边距）
step4：如果不合法，重新执行step2和step3
step5：如果合法，记为一个新圆
step6：重复step1~5，直到生成10个圆
代码：
// 参数
let obj = {
id: string, // canvas 的id
fix：boolean, // 是否固定半径，默认为false
minMargin： Number, // 两个圆的最短距离，默认为10
minRadius: Number, 最小的圆半径，默认为30
radiuArr: Array, 圆的半径的数组，当fix为true时该值必须填
total: Number ，圆的个数，默认为10
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
