Javascript 如何在循环中画两点之间的线？

我用jQuery制作了一个动画，看起来像这样：

$(function() {

var elems = $('div.icon').not('#icon-0');

var increase = Math.PI * 2 / elems.length,
    x = 0,
    y = 0,
    angle = 0,
    radius = 200;

var center_top = ($("#slider-1").outerHeight() - $("#icon-0").outerHeight())/2,
    center_left = ($("#slider-1").outerWidth() - $("#icon-0").outerWidth())/2;


$('.icon').css({
    'top': center_top + 'px',
    'left': center_left + 'px'
});

$(elems).css('opacity', '0').each(function(i) {
    elem = elems[i];

    x = radius * Math.cos(angle) + center_left;
    y = radius * Math.sin(angle) + center_top;

    $(elem).delay(400*i).animate({
        'position': 'absolute',
        'left': x + 'px',
        'top': y + 'px',
        'opacity': '1'
    }, 1000);

    angle += increase;

});

});

如何在中心圆和每个外圆之间画线

我试着用画布，通过偏移量和一些简单的数学来获取中心坐标，但画布不能很好地做到这一点，或者我就是做不到

谢谢你们的帮助

---

干杯

考虑到您不想使用画布（或不可行）制作​​使用css3转换的解决方案

遵循解决方案

在这个JSFiddle中->

您需要创建多个css类来生成一行

.line {
     border-top: 1px solid black;
     position: absolute;
     height: 1px;
     opacity: 0;
     -webkit-transform-origin: left;
     transform-origin: left;
}

要创建元素，可以在循环中创建

    var line = $("<div class='line'></div>");
    slider.append(line);
    line.css("width", 0);        

    line.css("top", center_top + ( $(this).height() / 2 ) );
    line.css("left", center_left + ( $(this).width() / 2 ) );
    line.css("transform", "rotateZ(" + angle + "rad)");

var line=$（“”）；
滑块。追加（行）；
行.css（“宽度”，0）；
css（“top”，center_top+（$（this.height（）/2））；
css（“left”，center_left+（$（this.width（）/2））；
css（“变换”、“旋转”（+angle+“rad”）；

非常感谢，这正是我想要实现的目标。我有同样的想法，但能找到解决办法。干杯