如果我在这个例子中有一个动画圆圈,有没有办法可以在画布上留下一个永久的轨迹,1px 纯白色?
我曾尝试动态构建路径,但无法使其正常工作。
在此先感谢,任何帮助将不胜感激
我不知道为什么 SVG 与它的乡下表亲 canvas 元素相比名声如此糟糕。令人惊讶的是,在真正尝试探索其功能之前,有多少次 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 中的事件绑定是多么容易。
你可以这样做:http: //jsfiddle.net/nDxbK/
编辑:我说如果示例不是直线移动的圆圈,这将不起作用,并且如果您想为随机移动做这种事情(但是画布上另一方面是理想的)。Zero 在他的回答中证明我错了,我写的内容被视为对 SVG 的批评——远离我!SVG很棒。