帶有動態部分的動畫畫布

Question

我正在嘗試實現與以下相同的想法： http : //jsfiddle.net/oskar/Aapn8/但是我正在嘗試使用不同大小的部分，而不是

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

作為我使用的繪制函數：

var draw = function(current) {
     for (i = 0 ; i < degrees.length ; i++) {
        color = colors[i];
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.arc(cx,cy,radius,start,start+toRad(degrees[i]));
        ctx.lineTo(cx,cy);
        ctx.closePath();
        ctx.fill();
        start += toRad(degrees[i]);
     }
}

但這不起作用（ https://jsfiddle.net/py6t8yj0/5/ ），但確實按需要繪制了圓圈。

我不需要“范圍”選擇器，但是一旦圓到達終點，我希望產生彈跳效果。

如果有人可以提供幫助，那將是很好的：D。

謝謝

Answer 1

看起來您在小提琴中沒有Mootools。 我收到一個錯誤：

Uncaught ReferenceError: Fx is not defined

如果單擊Javascript設置按鈕，則可以添加Mootools依賴項。 這是使用該依賴項更新的jsfiddle： https ://jsfiddle.net/py6t8yj0/1/