jQuery 用线条连接

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);