javascript - 弧形文本中字符串字符之间的间距不太正确。 (HTML Canvas )

Question

请参见此处 - http://schnell.dreamhosters.com/nysbc/test6.php
JSFiddle - http://jsfiddle.net/VauFH/

绘制文本的部分...

function draw_arc_text(ctx, str, radius){
            ctx.save();
            str = str.toUpperCase();
            var radians_per_letter = 8 * Math.PI/180;                                
            ctx.rotate((105 - (radius/60)) * Math.PI/180);
            for (var n = 0; n < str.length; n++) {
                ctx.save();
                ctx.rotate(n * radians_per_letter);
                ctx.fillText(str[n], 0, -radius);
                ctx.restore();
            }
            ctx.restore();
        }

您可能会发现彩色圆盘顶部的文本之间的间距有点偏离。我尝试过为每个字母设置一定数量的弧度/度数，但是半径越远，间距就越大，因此最外面的文本开始快速分离。我还尝试制定某种公式，将半径纳入每个字母的间距，但我似乎也不能完全正确。大家有什么想法吗？

此外，任何效率上的调整也将受到赞赏。我希望尽可能地进行优化。

Answer 1

<强> Live Demo

可能是数学家最可怕的噩梦:P。但以下方法有效。基本上我只是将结果除以半径/100。它给人的印象是等间距。

我所做的另一个更改是使用 requestAnimationFrame而不是间隔。与 setTimeout 相比，特别是与 Canvas 的 requestAnimationFrame 相比，间隔的性能不是很好。您会发现，当您离开该选项卡并返回该选项卡时，您不会再遇到令人讨厌的挂断。

我还摆脱了 jQuery 依赖项，因为您使用的只是 document.ready 所以它似乎不需要。

function draw_arc_text(ctx, str, radius){
                ctx.save();
                str = str.toUpperCase();

                var textWidth = Math.round(ctx.measureText(str).width);
                var radians_per_letter = (((textWidth/str.length)) * Math.PI/180)/(radius*.01);  

                ctx.rotate(95 * Math.PI/180);

                for (var n = 0; n < str.length; n++) {
                    ctx.save();
                    ctx.rotate(n * radians_per_letter);
                    ctx.fillText(str[n], 0, -radius);
                    ctx.restore();
                }
                ctx.restore();
            }