1

この例のようにアニメーション サークルがある場合、キャンバス上に 1 ピクセルの純白の永続的な軌跡を残す方法はありますか?

パスを動的に構築しようとしましたが、これを機能させることができませんでした。

事前に感謝します。どんな助けでも大歓迎です

4

2 に答える 2

5

なぜ SVG がその国のいとこである canvas 要素と比較してこれほどまでに評判が悪いのか、私にはわかりません。SVG の機能を真剣に探る試みが行われる前に、SVG が不適切または不適切であるとして却下された回数は驚くべきものです。

このフィドルを見てください。

これのほとんどは、次のように、パス上の移動ポイントの動的評価によって駆動されます。

function arrowline( canvas, pathstr, duration, attr, callback )
{    
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var start_time = new Date().getTime();
    var interval_length = 25;

    var interval_id = setInterval( function()
        {
            var elapsed_time = new Date().getTime() - start_time;
            var this_length = elapsed_time / duration * total_length;
            var subpathstr = guide_path.getSubpath( 0, this_length );
            attr.path = subpathstr;
            path.animate( attr, interval_length );

            if ( elapsed_time >= duration )
            {
                clearInterval( interval_id );
                if ( callback != undefined ) callback();
            }                                       
        }, interval_length );  
    return path;    
}

これよりも経済的な HTML キャンバスを使用したソリューションを見つけるように、私は誰にでも挑戦します。このウィジェットに対話機能を追加する予定がある場合は、経済性を評価する際に、SVG のイベント バインドがいかに簡単かを検討してください。

于 2012-06-26T16:52:11.317 に答える
0

次のようなことができます: http://jsfiddle.net/nDxbK/

編集:例が直線で移動する円ではない場合、これは機能しないと述べました。ランダムな移動のためにこの種のことを行いたい場合、SVG は適切ではありません (しかし、そのキャンバス上の一方が理想的です）。ゼロは彼の答えで私が間違っていることを証明し、私が書いたものは SVG に対する批判と見なされました。SVGは素晴らしいです。

于 2012-06-26T16:18:17.113 に答える