介绍//,参数
let obj =, {
,,id:字符串,,//,canvas 的id
解决办法:boolean、才能,//,是否固定半径,默认为假
minMargin才能:,,,//,两个圆的最短距离,默认为10
minRadius才能:号码,,最小的圆半径,默认为30
radiuArr才能:数组,,圆的半径的数组,当修为真时该值必须填
,,总:Number ,圆的个数,默认为10
} & lt; ! DOCTYPE html>
& lt; html>
& lt; body>
& lt; canvas id=癿yCanvas",宽度=?00“,身高=?00“,在
Your browser does not support 从而HTML5 canvas 标记。
& lt;/canvas>
& lt; script>
class Circle {
构造函数才能(r, x,, y,,颜色){
,,,this.x =, x
,,,this.y =y
,,,this.r =, r,
,,,this.c =, color ?, color :, this.getRandomColor ()
,,}
{getRandomColor才能(),
,,,let r =, Math.floor (math . random () * 100), +, 155
,,,let g =, Math.floor (math . random () * 100), +, 155
,,,let b =, Math.floor (math . random () * 100), +, 155
,,,return “rgb ($ {}, $ {g}, {b})美元的,
,,},
}
class RandomCircle {
构造函数(obj)才能,{
,,,this.c ,,,,,=, . getelementbyid (obj.id);
,,,this.ctx ,,,,=, this.c.getContext (“2 d");
,,,this.dWidth ,,=, this.c.width;
,,,this.dHeight ,,=this.c.height
,,,this.fix ,,,,=, obj.fix | |,假;
,,,this.minMargin ,=, obj.minMargin | |, 10,
,,,this.minRadius ,=, obj.minRadius | |, 30岁
,,,this.radiuArr ,=, obj.radiuArr | |,(80、70、60、50, 45岁,40岁,40岁,35岁,35岁,30)
,,,this.total =, obj.total | |, 10
,,,this.circleArray =, []
,,,this.circleNumber =1
,,}
drawOneCircle才能(c), {
,,,let ctx =, this.ctx;
,,,ctx.beginPath ();
,,,ctx.strokeStyle =,运费到付;
,,,ctx.fillStyle=运费到付;
,,,ctx.arc (c.x,研讨会,,得力助手rc,, 0,, 2 * Math.PI);
,,,ctx.stroke ();
,,,ctx.fill ();
,,,ctx.fillStyle=& # 39;黑色# 39;;
,,,ctx.fillText(& # 39;没有:& # 39;+ this.circleNumber, c.x-10,, c.y-5);
,,,ctx.fillText (& # 39; R: & # 39; +得力助手rc, c.x-10,,陈守惠+ 5);
,,,this.circleNumber + +,
,,}
检查才能(x, y, r), {
,,,return ! (x + r 祝辞,this.dWidth | |, x-r & lt;, 0, | |, y +, r 祝辞,this.dHeight | |, y-r & lt;, 0)
,,}//,才能获取一个新圆的半径,主要判断半径与最近的一个圆的距离
getR才能(x, y), {
,,,if (this.circleArray.length ===, 0), return Math.floor (20, math . random () * +, 80)
,,,let lenArr =, this.circleArray.map (c =祝辞,{
,,,,,let xSpan =c.x-x
,,,,,let ySpan =c.y-y
,,,,,return Math.floor (Math.sqrt (Math.pow (xSpan, 2), +, Math.pow (ySpan 2))),安康;镉比
,,,})
,,,let minCircleLen =, Math.min (…lenArr)
,,,let minC =, this.circleArray [lenArr.indexOf (minCircleLen)]
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关js怎么实现固定区域内的不重叠随机圆的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
最近公司有一个需求就是在一个固定的区域(<强> 500 x500 )内显示10个圆,且半径固定,而且不重叠
因为圆的个数固定,而且半径固定,那么就有可能会没有解决方案。
不过其实也没有很难,处理好半径的最大值就好了。
<>强效果图:
<强>思路:
(固定半径)
步骤1:先在区域内生成一个随机的圆心坐标,
步骤2:然后拿一个固定半径(从大到小拿固定半径)
步骤3:判断圆心和半径是否合法(是否超边距,或者两个圆相交)
目的:如果不合法,重新执行步骤2和步骤3
顾不上如果合法,记为一个新圆
第六段:重复步骤1 ~ 5,直到生成10个圆
(随机半径)
步骤1:先在区域内生成一个随机的圆心坐标,
步骤2:根据圆心坐标,与其他圆比较,获取最短的圆心距减去比较圆的半径(圆心距- r n RnR_n)的值,作为新圆的半径(这样就会生成一个相切的圆)
步骤3:判断圆心和半径是否合法(是否超边距)
目的:如果不合法,重新执行步骤2和步骤3
顾不上如果合法,记为一个新圆
第六段:重复步骤1 ~ 5,直到生成10个圆
<强>代码:
