Question

我在画布上绘制椭圆没有问题，但是如何绘制在椭圆的周长上等距分布的项目（在我的情况下，最多8个玩家头像）？

Answer 1

关键是将360°除以玩家人数，然后计算每个化身的角度并使用余弦和正弦确定位置：

const w = can.width = window.innerWidth;
const h = can.height = window.innerHeight;
const con = can.getContext("2d");
const tau = Math.PI * 2;

// center ellipse inside canvas
const cx = w / 2,
  cy = h / 2;
const rx = w / 2.5,
  ry = rx * 0.3;

con.beginPath();
con.ellipse(cx, cy, rx, ry, 0, 0, tau);
con.closePath();
con.stroke();
// example: 7 avatars
const total = 7;
for (var i = 0; i < total; i++) {
  // calculate partial angle for each avatar
  var angle = i * tau / total;
  con.beginPath();
  // calculate position
  con.ellipse(cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry, 10, 10, 0, 0, tau);
  con.closePath();
  con.stroke();
}

body {
  margin: 0;
}

#can {
  display: block;
  height: 100vh;
}

<canvas id="can"></canvas>

是否可以使用Javascript在画布上的椭圆周围等距绘制化身？

1 个答案: