JS显示与圆相切的文字

Question

这是我目前所拥有的 https://jsfiddle.net/0p7zf13x/5/

这是我想得到的 Text around circle, and tangent to its center

代码在 jsfiddle 上，但这里只是其中的一小部分。

    var count = $("#rollo ul li").length;
var cx = 300;
var cy = 300;
var r = 300;

$("#rollo ul li").each(function(index) {
    var theta = 2 * Math.PI * (index / count);
    var left = cx + r * Math.sin(theta);
    var top = cy - r * Math.cos(theta);
    console.log(index, left, top);
    $(this).css({ left: left, top: top });

        $(this).css({"transform":"rotate("+Math.cos(theta)*-90+"deg)"});
});

我从这个代码页开始 placing divs in a circle

问题：如何使文本围绕圆圈和第一个字母的左侧，与同一个圆圈相切？所有文本均匀分布。

谢谢

Answer 1

只需使用生成的角度：

$(this).css({"transform":"rotate("+(theta-Math.PI/2)+"rad)"});

fiddle

JS显示与圆相切的文字

JS display text tangent to a circle

javascript

css

geometry

text

transform