如何制作旋转渐变（在圆上）？

我创建了一个简单的圆与弧功能：如何制作旋转渐变（在圆上）？

/* ctx is the 2d context */ 
ctx.beginPath(); 
    var gradient = ctx.createLinearGradient(0, 0, this.radius, this.radius); 
    gradient.addColorStop(0, '#FF0000'); 
    gradient.addColorStop(1, '#FFFFFF'); 
    ctx.lineWidth = 10; 

    ctx.arc(this.radius, this.radius, this.radius, 0, 2*Math.PI, true); 
    ctx.strokeStyle = gradient; 
ctx.stroke();

所以我要旋转渐变，这可能吗？我试过用ctx.rotate（x），但是会旋转整个圆圈！

来源

2011-04-27 ComFreek

是的。你梯度会从x1,y1到x2,y2，这是createLinearGradient

例如最后四个参数，扭转你的梯度做到这一点：

var gradient = ctx.createLinearGradient(this.radius, this.radius, 0, 0);

或更改它，但是请你：

var gradient = ctx.createLinearGradient(this.radius, 0, 0, 0);

等等。

来源

2011-04-27 17:15:46

谢谢，但我真的不明白第二个坐标x2和y2。我应该通过周长吗？ – ComFreek 2011-04-27 17:41:46

您只需使用想要渐变的起点和终点的两点。所以你现在从左上角开始到半径半径结束。你想在哪里开始和结束？ – 2011-04-27 17:53:21

渐变应该在整个圆上展开，所以我必须设置半径。我已经做了一些尝试，但我该如何做一个循环？我的意思是什么时候x和y等于半径？ – ComFreek 2011-04-28 16:27:45

如何制作旋转渐变（在圆上）？

回答

相关问题