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で割るだけです。これにより、等間隔の印象が得られます。

私が行った別の変更は、interval の代わりに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

canvas 要素の経験はあまりありませんがletter-spacing、テキストで CSS のプロパティを使用する方法はありますか?

于 2012-10-26T16:00:56.063 に答える