Нарисуйте несколько цифр по кругу

Question

Как показано ниже, я попытался нарисовать числовой круг, но я хочу, чтобы этот круг начинался всегда с 0 сверху, как я могу достичь такого поведения.

Кроме того, я хочу, чтобы соединить число от внутренней окружности границы на номер с пунктирной линией, как я могу нарисовать пунктирную линию

http://jsfiddle.net/ineffablep/x03f61db/

function createFields() { 
    $('.field').remove(); 
    var container = $('#container'); 
    for(var i = 0; i < +$('input:text').val()+1; i++) { 
     $('<div/>', { 
      'class': 'field', 
      'text': i 
     }).appendTo(container); 
    } 
} 

function distributeFields() { 


    var fields = $('.field'), container = $('#container'), 
     width = center.width()*2, height = center.height()*2, 
     angle = 0, step = (2*Math.PI)/fields.length; 
    var radius = width/2; 
    var containerLength=$('input:text').val(); 
    angle=step* (containerLength-1); 

    fields.each(function() { 

     var x = Math.round(width + radius * Math.cos(angle)); 
     var y = Math.round(height + radius * Math.sin(angle)); 
      $(this).css({ 
      right: x + 'px', 
      top: y + 'px' 
     }); 
     angle -= step; 

    }); 
} 
var center = $('#center'); 

$(window).resize(function(height) { 

    $('#container').width($(window).height()*0.9) 
    $('#container').height($(window).height()*0.9) 
    var width = $('#container').width() * 0.4; 
    console.log("width",$('#container').width()); 
    console.log("height",$('#container').height()); 
    var radius = width/2; 
    width += 'px'; 
    radius += 'px'; 
    center.css({ 
     width: width, height: width, 
     '-moz-border-radius' : radius, 
     '-webkit-border-radius' : radius, 
     'border-radius' : radius 
    }); 

createFields(); 
distributeFields(); 
    // rest of your code for font-size setting etc.. 
}); 

$(window).resize(); 


$('input').change(function() { 
    createFields(); 
    distributeFields(); 
}); 

Answer 1

Ваш начальный угол должен быть изменен.

angle = -90*Math.PI/180; // (deg) * [Math.PI/180 == rad to deg] 
//We have to provide values in radians, so we convert our degrees to radians 

check this link