Question

如果我有一个像example那样的动画圆圈，有没有一种方法可以在画布上留下1px纯白色的永久痕迹？

我尝试过动态构建路径，但无法使其正常工作。

提前致谢，我们非常感谢任何帮助

Answer 1

我不知道为什么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中的事件绑定是否容易。

Answer 2

您可以执行以下操作：http://jsfiddle.net/nDxbK/

编辑：我声明如果示例不是直线上的圆圈，那么这将不起作用，如果您想要进行此类操作，那么SVG就不够了随机运动的东西（但另一方面，画布将是理想的）。 Zero在他的回答中证明我错了，我写的内容被视为对SVG的批评 - 远非我！ SVG太棒了。

SVG Raphael jQuery Build path / trail

2 个答案: