HTML Canvas Градиентная анимация

Question

В следующем примере, как мне сделать следующее

1. Когда я создаю градиенты в функции createGradient, только первая дуга имеет несколько цветов, вторая дуга имеет один цвет

2. Когда вызывается функция animate, я хочу изменить только указанный градиент, а не все из них

function init() {
    can = document.getElementById("can");
    ctx = can.getContext("2d");
    drawGradients();
    var t=setTimeout("animate()",3000);
}  

function  drawGradients() {
    var points = [[50,50,5, 50,50,50], [275,275,5, 275,275,50]];
    for ( var i=0; i < points.length; i ++ ) {
        var cords = points[i];
         createGradient ( points[i] );
    }   

}        

 function createGradient( cds) {
    var grad = ctx.createRadialGradient( cds[0],cds[1],cds[2],cds[3],cds[4],cds[5]);
    grad.addColorStop(0, 'white');
    grad.addColorStop(1, 'black');
    ctx.fillStyle=grad;
    ctx.arc(cds[3],cds[4], cds[5], 0, 2 * Math.PI);
    ctx.fill();

}

function animate() {
    var cds =[50,50,5, 50,50,50];
        var grad = ctx.createRadialGradient( cds[0],cds[1],cds[2],cds[3],cds[4],cds[5]);
        grad.addColorStop(0, 'white');
        grad.addColorStop(1, 'blue');
        ctx.fillStyle=grad;
        ctx.arc(cds[3],cds[4], cds[5], 0, 2 * Math.PI);
        ctx.fill();
    }        

</script>

Answer 1

Ваша первая проблема заключается в том, что она перерисовывает обе дуги на втором проходе.Это потому, что вы никогда не закрывали путь.Поскольку они находятся на одном и том же пути, они получают только один градиент, поэтому, похоже, что одна фигура не получила градиент, но на самом деле она использует цвет другой фигуры!

Чтобы исправить, выполните:

ctx.beginPath()
ctx.arc(cds[3],cds[4], cds[5], 0, 2 * Math.PI);
ctx.closePath()
ctx.fill();

Это также исправит вашу проблему с анимацией, и теперь анимация изменит только один из градиентов.

Рабочий код:

http://jsfiddle.net/8AB3D/