javascript - 在 div 周围均匀分布元素？

Question

我正在制作一个座位表应用程序，用户可以在其中选择一张 table 上他们想要的椅子数量(1 - 13 个座位)。问题是我找不到动态平均分配座位的方法。如果用户选择了 3 把椅子，那么它们之间应该有 33.3% 的空间围绕圆圈。 4 把椅子意味着 25% 的空间等等。

代码片段是一个快速模型。在选择更改时，应显示正确数量的座位并且彼此等距。

.tableContain
{
  width: 300px;
  height: 300px;
  border: 3px dotted black;
  position: relative;
}
.table
{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.seat
{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div class="tableContain">
  <div class="table"></div>
  <div id="seat1" class="seat"></div>
</div>
Number Of Seats<select>
   <option val=1>1</option>
<option val=1>2</option>
<option val=1>3</option>
<option val=1>4</option>
</select>
<br>
<br>

Answer 1

这是一个使用 Canvas 的解决方案。基本上，我们会监听 select 元素上的更改事件，并调用绘制可视化效果的函数。
此函数的工作原理是将圆划分为相等的段并在每个段的末尾绘制一个圆。

const select = document.getElementById("seatsNum");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const cW = canvas.width, cH = canvas.height;

function drawSeats(count) {
  ctx.clearRect(0, 0, cW, cH);
  const tableRad = cW*0.2;
  const chairRad = cW*0.05;
  
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  ctx.arc(cW/2, cH/2, tableRad, 0, 2*Math.PI, false);
  ctx.stroke();
  
  ctx.fillStyle = "#ccc";
  const segment = 360 / count;
  for (let i = 0; i < count; i++) {
    const x = (tableRad + 2*chairRad) * Math.cos(i*segment*Math.PI/180);
    const y = (tableRad + 2*chairRad) * Math.sin(i*segment*Math.PI/180);
    ctx.beginPath();
    ctx.arc(cW/2 + x, cH/2 + y, chairRad, 0, 2*Math.PI, false);
    ctx.fill();
    ctx.stroke();    
  }
}

select.onchange = function(ev) {
  const val = select.value;
  drawSeats(val);  
}

drawSeats(1);

canvas {
  border: 3px dotted black;
  position: relative;
}

<div class="tableContain">
  <div class="table"></div>
  <div id="seat1" class="seat"></div>
</div>
<canvas id="canvas" width="300" height="300"></canvas>
<br/>
Number Of Seats
<select id="seatsNum">
  <option val="1">1</option>
  <option val="2">2</option>
  <option val="3">3</option>
  <option val="4">4</option>
  <option val="5">5</option>
  <option val="6">6</option>
  <option val="7">7</option>
  <option val="8">8</option>
  <option val="9">9</option>
  <option val="10">10</option>
  <option val="11">11</option>
</select>
<br>
<br>