Javascript 创建旋转形状的背景

我正在尝试创建一个以旋转形状为背景的容器。现在它们随机插入容器中，这是可取的，但不是必需的。它们必须在容器内部，并且不能相互碰撞

我已经寻找了一个关于如何做到这一点的解释，也尝试了很多东西，但似乎没有得到任何工作。任何建议或技巧，以实现这一点是高度赞赏

这是我的目标：

这就是我现在得到的：

 var container = document.getElementById('container');

 for (var i = 1; i <= 10; i++) {
   var squarePositionX = Math.floor(Math.random() * 300);
   var squarePositionY = Math.floor(Math.random() * 100);

   var circlePositionX = Math.floor(Math.random() * 200);
   var circlePositionY = Math.floor(Math.random() * 80);

   var square = document.createElement('div');
   square.className = 'square';
   square.innerHTML = '';
   square.style.top = squarePositionY + 'px';
   square.style.left = squarePositionX + 'px';
   container.appendChild(square);

   var circle = document.createElement('div');
   circle.className = 'circle';
   circle.innerHTML = '';
   circle.style.top = circlePositionY + 'px';
   circle.style.left = circlePositionX + 'px';
   container.appendChild(circle);
 }

---

第一步是从形状的可能位置减去形状的宽度和高度：

var squarePositionX=数学。floorMath。随机*集装箱宽度-平方宽度

然后你必须检查这个空间是否被占用，要检查这个你可以

遍历所有元素并询问它们的大小和位置 保存每个元素的大小和位置 在下面的代码片段中，我迭代了所有元素，并创建了一个函数来检查它们是否冲突

var container=document.getElementById'container'； var containerWidth=container.clientWidth； var containerHeight=container.clientHeight； var形状参数=15； var=2.5； 变量形状=[正方形、圆形、三角形]； 变形金刚； 风险价值金额=200； var escape=金额*100； var k=0； 对于var i=0；i<数量；i++{ k++； var shapePositionX=Math.floorMath.random*containerWidth-shapedAmeter+containerAdding； var shapePositionY=Math.floorMath.random*containerHeight-shapeDiameter+containerAdding； var shaperotion=Math.floorMath.random*360； var shape=document.createElement'div'； shape.className=形状[i%3]； shape.innerHTML=； shape.style.top=shapePositionY+'px'； shape.style.left=shapePositionX+‘px’； shape.style.transform=旋转+形状旋转+角度； 容器形状； allShapes=container.children； 如果i>0{ 对于var j=0；j=转义{ 在+i时的最大值； i=金额； } } 功能冲突OBJ1、obj2{ 变量shapedAmeter1，shapedAmeter2； ifobj1.className==square{ 形状参数1=15； }else ifobj1.className==圆圈{ 形状参数1=10.5； }else ifobj1.className==三角形{ 形状参数1=11.5； } ifobj2.className==square{ 形状参数2=16； }else ifobj2.className==圆圈{ 形状参数2=11； }else ifobj2.className==三角形{ 形状参数2=12； } var myleft=parseIntobj1.style.left，10； var myright=myleft+shapedAmeter1； var mytop=parseIntobj1.style.top，10； var mybottom=mytop+shapeDiameter1； var otherleft=parseIntobj2.style.left，10； var otherright=otherleft+shapedAmeter2； var othertop=parseIntobj2.style.top，10； var otherbottom=othertop+shapeDiameter2； var collide=true； 如果mybottomotherbottom | | myrightotherright{ 碰撞=错误； } 返回碰撞； } 容器{ 宽度：300px； 高度：300px； 背景颜色：灰色； 位置：相对位置； } .广场{ 框大小：边框框； 边框：1px实心Gainsboro； 位置：绝对位置； 宽度：10px； 高度：10px； z指数：5； } .圆圈{ 框大小：边框框； 边框：1px实心Gainsboro； 边界半径：100%； 位置：绝对位置； 宽度：10px； 高度：10px； } .三角形{ 宽度：0； 身高：0； 边框样式：实心； 边框宽度：0 5px 8.7px 5px； 边框颜色：透明Gainsboro透明； 位置：绝对位置； } /* square:之前， .圆圈：之前， .三角：以前{ 内容：； 位置：绝对位置； 背景色：rgba255、255、255、0.1； 边界半径：10px； } .方：以前{ 宽度：15px； 高度：15px； 顶部：-3.5px； 左：-3.5px； } .圆圈：之前{ 宽度：10.5px； 高度：10.5px； 左：-1px； 顶部：-1px； } .三角：以前{ 宽度：11.5px； 高度：11.5px； 左：-5.5px； 顶部：0px； }*/

---

谢谢你的回答和解释。我用减法更新了提琴，比如正方形的宽度和高度。但我觉得我做得不好。我添加了迭代来检查大小和位置。但我不知道我怎么才能保存它。我可以保存它，然后问这个位置是否有形状，然后把它放在其他地方吗？感谢所有的帮助和解释：