javascript - 带有动态部分的动画 Canvas

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

看起来您的 fiddle 中没有包含 Mootools。我收到一个错误:

Uncaught ReferenceError: Fx is not defined

如果单击 Javascript 设置按钮，则可以添加 Mootools 依赖项。这是使用该依赖项更新的 jsfiddle:https://jsfiddle.net/py6t8yj0/1/