如何製作旋轉漸變（在圓上）？

我創建了一個簡單的圓與弧功能：如何製作旋轉漸變（在圓上）？

/* 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

如何製作旋轉漸變（在圓上）？

回答

相關問題