1

见这里 - 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();
        }

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

此外，效率方面的任何调整也将受到赞赏。我喜欢尽可能优化。

4

2 回答 2

1

现场演示

可能是数学家最糟糕的噩梦：P。以下工作虽然。基本上我只是将结果除以半径/100。它给人的印象是间距相等。

我所做的另一个更改是使用requestAnimationFrame而不是间隔。setTimeout与画布相比，尤其是与画布相比，间隔的性能不是很好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();
            }
于 2012-10-26T16:23:52.930 回答
-1

我对画布元素没有太多经验，但是有什么方法可以letter-spacing在文本上使用 CSS 属性吗？

于 2012-10-26T16:00:56.063 回答