Question

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

当我在createGradient函数中创建渐变时，只有第一个弧有多个颜色，第二个弧有一个颜色
调用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/

HTML Canvas渐变动画

1 个答案: