I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue?
How can I fix this problem?
$(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>