Javascript 向现有画布元素添加另一个笔划

如何在同一个圆中添加另一个具有不同颜色和长度的笔划？ 此脚本使用Mootools库。它可以在纯JavaScript或jQuery中转换吗

小提琴：

谢谢：）

---

画第二条路对我来说似乎很好

// SVG stuff
var ctx = document.id('counter').getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;

var imd = ctx.getImageData(0, 0, 160, 160);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.strokeStyle = '#ff00ab';
    ctx.lineCap = 'square';
    ctx.lineWidth = 10;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#bb00bc';
    ctx.lineCap = 'square';
    ctx.lineWidth = 5;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

var myFx = new Fx({
    duration: 5500,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 80);

---

画另一个圆。我试过了，但只有第二个笔划是可见的。你能更新我的小提琴吗？但是另一个笔划需要不同的长度，我应该为此创建一个新的功能吗@如果你愿意，有很多不同的方法可以做到。这个怎么样？我使用的是手动值。有更好的方法吗？a）你不能在评论中问更多的问题（如果你真的需要，可以使用“提问”按钮问一个新的问题）b）你在上面问过的问题的答案会偏离主题，因为主要是基于观点的。

// SVG stuff
var ctx = document.id('counter').getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;

var imd = ctx.getImageData(0, 0, 160, 160);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.strokeStyle = '#ff00ab';
    ctx.lineCap = 'square';
    ctx.lineWidth = 10;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#bb00bc';
    ctx.lineCap = 'square';
    ctx.lineWidth = 5;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

var myFx = new Fx({
    duration: 5500,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 80);