jquery - 使用 javascript buggy 将点排列在圆圈周围

Question

我正在尝试在圆周围排列点。但我得到了错误的结果。某些 Angular (顶部和底部)未正确定位。会出现什么问题？

如何解决这个问题？

$(function(){
  
  var globe = $('#center');
  var width = globe.width() / 2 ;
  var height = globe.height() / 2;
  var point = $('.point').width();
  var pointer = $('<div />', {class:'test'});

  
  for(var i = 1; i <=  360; i++) {
    
    pointer.clone().css({
      left: width  + (width) * Math.cos(i * Math.PI / 180),
      top: height  + (height + point) * Math.sin(i * Math.PI / 180)
    }).appendTo('#center');
    
  }
     
 
});

#center {
    width:300px;
    height:300px;
    border-radius:50%;
    border:1px solid red;
    position:relative;
    left:200px;
    top:100px;
}

.test {
  
  width:0.1em;
  height:0.1em;
  background:gray;
  position:absolute;
  border-radius:50%;
  
}

.point {
  width:0.5em;
  height:0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div class="point"></div>

Answer 1

替换:

  top: height  + (height + point) * Math.sin(i * Math.PI / 180)

与:

  top: height  + (height) * Math.sin(i * Math.PI / 180)