HTML画布梯度动画

Question

在下面的示例中，如何执行以下操作

1. 当我在createGradient函数中创建渐变时，只有第一个弧线有多个颜色，第二个弧线在调用动画函数时有一个单一颜色的
2. ，我只想更改一个指定的梯度，而不是所有的

。

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/