Draw some numbers around the circle.

Question

According to the script below, I tried to draw a number circle, but I want this circle to always start with 0 from above, how can I achieve this behavior.

I also want to connect numbers from the border of the inner circle to a number with a dashed line, how to draw a dashed line

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

Your starting angle must be changed.

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