テーブル周りの椅子の移動方法と回転方法

Question

丸テーブルの周りにn個の椅子を均等に配置したいと思います。
サークルの周りのオブジェクトをアニメーションにするいくつかのソリューションを試しましたが、問題の解決にそれらを変換できません。
（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ラインドロップ：今

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();

<canvas id=c></canvas>

を、すべての椅子は、同じ方向に直面するだろう。彼らはあなたを指している必要があり、オンラインでのローディングスピナー発電のためのコードで

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();

<canvas id=c></canvas>

Answer 2

、変更してみてください：

var step = 360/chairs; 

var step = 360/(chairs + 1);