HTML帆布梯度动画

在以下示例中，如何执行以下HTML帆布梯度动画

当我创建在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>

来源

2011-05-25 user94437

很有可能完全无关的问题，但它通常是更好地做到'的setTimeout（动画，3000）'不是'的setTimeout（ “动画（）”，3000）'因为后者使用'eval'。 – icktoofay 2011-05-25 01:58:37

你的第一个问题是，因为它是重绘在第二次都弧。这是因为你从不关闭路径。由于它们位于相同的路径上，因此它们只会获得一个渐变，所以看起来像一个形状没有渐变，但实际上它使用的是其他形状的颜色！

要解决办：

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

这也将解决您的有生问题，现在动画只会改变梯度之一。

工作代码：

http://jsfiddle.net/8AB3D/

来源

2011-05-25 04:17:05

HTML帆布梯度动画

回答

相关问题