js在固定区域内实现不重叠的随机圆

本文给出了一个在js的固定区域内共享非重叠随机圆的例子，供大家参考。具体内容如下

关键词：js，固定面积，不重叠，随机圆，固定半径，随机半径

最近公司有需求，在固定区域(500X500)显示10个圆，半径固定，不重叠

因为圈数是固定的，半径也是固定的，所以可能没有解。

不过，也不是很难，只要处理好最大半径即可。

渲染：

思考：

(固定半径)

第一步：先在区域内生成一个随机的中心坐标，第二步：然后取一个固定半径(取一个由大到小的固定半径)第三步：判断中心和半径是否合法(是否超出边距，或者两个圆相交)第四步：如果不合法，重新执行第二步和第三步第五步：如果合法，记录为一个新圆第六步：重复第一步~第五步，直到生成10个圆

(随机半径)

第一步：首先在区域内生成一个随机的中心坐标；第二步：根据中心坐标，与其他圆进行比较，得到最短的中心距减去比较圆的半径(中心距-R n RnR_n)作为新圆的半径(这会生成一个切圆)；第三步：确定中心和半径是否合法(是否超出余量)；步骤4:如果没有，重新执行步骤2和步骤4

代码：

//参数让obj={ id: string，//canvas的编号修复：布尔值，//是否固定半径，默认为错误的最小化：数字，//两个圆的最短距离，默认为10分钟半径：号，最小的圆半径，默认为30半径：阵列，圆的半径的数组，当固定为真实的时该值必须填总数：圆的个数，默认为10} !DOCTYPE html html body canvas id=' my canvas ' width=' 500 ' height=' 500 ' style=' border :1 px solid # d3d 3；'您的浏览器不支持HTML5画布标记。/拉票类圆圈{构造函数(x，y，r，color){这个。x=x这个。y=y这个。r=r，这个. c=颜色？颜色：这个。getRandomColor()} getRandomColor(){ let r=math。地板(数学。random()* 100)155让g=math。地板(数学。random()* 100)155让b=数学。地板(数学。random()* 100)155返回` RGB($ { r }、${g}、$ { b })` } }类RandomCircle { constructor(obj){ this。c=文档。getelementbyid(obj。id)；这个。CTX=这个。c . GetContext(' 2d ')；这个。这个。宽度；这个。好吧=这个。高度这个。修复=obj。fix | | false这个。明马金=物体。这个。minradius=obj。最小半径| | 30这个。radiaur=obj。radiaur | |[80，70，60，50，45，40，40，35，35，35，35，30]这个。总计=obj。总计| | 10这个。circlearray=[]这个。画一个圆(c){让CTX=这个。CTX；CTX。begin path()；CTX。strokestyle=c . cCTX。FillStyle=c . cctx.arc(c.x，c.y，c.r，0，2*Math .PI)；CTX。笔画()；CTX。fill()；ctx.fillStyle=' blackCTX。填充文本('编号： '这个。circlennumber，c.x-10，c . y-5)；ctx.fillText('R:' c.r，c.x-10，c . y 5)；this.circleNumber }检查(x，y，r) {返回！(x r这个。dwidth | | x-r 0 | | y r这个。d heat | | y-r 0)}//获取一个新圆的半径，主要判断半径与最近的一个圆的距离getR(x，y){ if(this。circlearray。长度===0)返回数学地板(数学随机()*20 80)让lenArr=这个。circlearray。map(c={ let xSpan=c . x-x让ySpan=c.y-y返回数学。地板(数学。sqrt(数学。pow(xSpan，2) Math.pow(ySpan，2))-c . r })让minCircleLen=Math.min(.lenArr)让minC=这个。circlearray[lenArr。indexof(minCircleLen)]让tempR=this.fix？这个。radiar[这个。circlearray。长度]: minCircleLen-这个。明马金让bool=this.fix？(TempR=MinCirclelen-MinC。r):(TempR=这个。最小半径)返回布尔？tempR : false } //生成一个圆，随机生成圆心。 //如果连续生成200次半径都没有合适的话，终止进程createOneCircle(){ 0让x，y，r；让createCircleTimes=0，而(true){ createCircleTimes x=math。地板(数学。random()*这个。y=数学。地板(数学。random()*这个。dheer)让TR=this.getR(x，y) if(！TR){ 0继续；} else { r=TR } if (this.check(x，y，r)| | createCircleTimes 200){ break } } this。检查这个。circlearray。push(新圆(x，y，r)) } //如果生成100次新圆都失败的话，终止方案。 //如果生成100种方案都没有合适可用的话，终止进程init(){ 0让n=0。circlearray。长度这个。总计){这个。circlearray=[]让I=0；而(这个。circlearray。长度这个。总计){这个。createone circle()I if(I=100){ break；} } n if(n ^ 100){ break；} } //根据半径从大到小画圆this.circleArray.sort((a，b)=b.r-a.r).forEach(c={ this。画线圆(c)})} }让p=new RandomCircle({ id : ' my canvas '，总计： 20 })p . init()控制台。日志(p . circlearray)/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。