如何在桌子周围翻译和旋转椅子

Question

我想在圆桌周围均匀分布数把椅子 尝试了几个涉及动画围绕圆圈的对象的解决方案，但是我无法将它们中的任何一个转换为我的问题的解决方案。
（http://jsfiddle.net/m1erickson/dFctW/和http://jsfiddle.net/Cu6Zv/1/）

我正在进行的项目涉及一定数量的椅子，需要在选定数量的桌子中进行划分。我设法制作了一个原型，但椅子没有均匀分布，也没有朝桌子中心旋转。

var step = 360 / chairs;
for(var count = 0; count < chairs; count++){
  angle += Math.acos(1-Math.pow(step/radius,2)/2);

  var x = cx + radius * Math.cos(angle);
  var y = cy + radius * Math.sin(angle);

  ctx.rect(x-5,y-5,10,10);
  ctx.stroke();
}

我创建了迄今为止我所拥有的jsfiddle。

希望有人能解释我如何：

• 将椅子均匀地围绕圆圈翻译
• 旋转每把椅子以与桌子对齐（指向桌子的中心）
• 也许解释它背后的数学，所以我可以理解它在做什么，以及如何根据需要进行调整。

提前致谢。

Answer 1

您的代码几乎正确。只需使用弧度并删除acos行：

＆＃13;

＆＃13;

var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;

for(var count = 0; count < chairs; count++){
  var x = cx + radius * Math.cos(angle);
  var y = cy + radius * Math.sin(angle);
  ctx.rect(x-5,y-5,10,10);
  angle += step;
}
ctx.stroke();

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;

现在，所有椅子都面向同一个方向。如果你想旋转它们使它们面向表格的中心，它可能更容易使用变换而不是手动计算位置：

＆＃13;

＆＃13;

var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;

// translate to center
ctx.translate(cx, cy);

for(var count = 0; count < chairs; count++){
  // rotate around center (0,0)
  ctx.rotate(step);
  
  // draw using radius as offser on x-axis only
  ctx.rect(radius -5,-5,10,10);
  ctx.rect(radius -5, -1, 4,2);
}
ctx.stroke();

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于您的第一个问题，请尝试更改：

var step = 360 / chairs;

到

var step = 360 / (chairs + 1);