jQuery connect with lines

Question

Как подключить номера с пунктирными линиями в нижнем jsfiddle.

Я хочу, чтобы эти строки начинались с границы внутреннего круга, либо из jQuery, либо из css. Я имею в виду, что вокруг границы внутреннего круга начинаются от внутреннего края границы до числа, ....... 1, ..... 2, чтобы показать направляющие линии.

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

Я достиг этого с Canvas

context.fillStyle = '#00867F'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = '#F0EBF1'; 
    context.stroke(); 

    context.setLineDash([1,2]); 
    context.moveTo(lx, ly); 
    context.lineTo(nx, ny);