如何旋轉線性漸變？

Question

如何讓我的白線完全對角線從我的底部矩形的點到點？

https://jsfiddle.net/a7rs5qu5/

<canvas id="canvas" width="300" height="300"></canvas> 

_canvas = document.getElementById('canvas'); 
_stage = _canvas.getContext('2d'); 

_stage.fillStyle = "#00FF00"; 
_stage.fillRect(0, 0, 300, 200); 

var gradient = _stage.createLinearGradient(0, 200, 300, 300); 
gradient.addColorStop(0, "blue"); 
gradient.addColorStop(.5, "white"); 
gradient.addColorStop(1, "blue"); 

_stage.fillStyle = gradient; 
_stage.fillRect(0, 200, 300, 300); 

Answer 1

通過數學和變化梯度座標。您需要設置梯度座標，以便它們描述與其正交的線。

_canvas = document.getElementById('canvas'); 
 
_stage = _canvas.getContext('2d'); 
 

 
_stage.fillStyle = "#00FF00"; 
 
_stage.fillRect(0, 0, 300, 200); 
 

 
var radius = 100; 
 
var angle = Math.atan2(100, 300) + Math.PI/2; 
 
var gx = radius * Math.cos(angle); 
 
var gy = radius * Math.sin(angle); 
 
var cx = (0 + 300)/2; 
 
var cy = (200 + 300)/2; 
 

 
var gradient = _stage.createLinearGradient(cx - gx, cy - gy, cx + gx, cy + gy); 
 
gradient.addColorStop(0, "blue"); 
 
gradient.addColorStop(.5, "white"); 
 
gradient.addColorStop(1, "blue"); 
 

 
_stage.fillStyle = gradient; 
 
_stage.fillRect(0, 200, 300, 300);

<canvas id="canvas" width="300" height="300"></canvas>

的radius控件中的選擇有多寬梯度;上面的值只是給出了與上面代碼中使用的值相似的值。

Answer 2

下面是懶惰的更通用的解決方案。

function createDiagonalGradient(startx, starty, endx, endy) 
    { 

    var height = endy - starty; 

    var radius = height; 

//-1 or 1 depending on which diagonal you want 
    var angle = -1 * Math.atan2(height, endx) + Math.PI/2; 


    var gx = radius * Math.cos(angle); 
    var gy = radius * Math.sin(angle); 
    var cx = (startx + endx)/2; 
    var cy = (starty + endy)/2; 

    var gradient = _stage.createLinearGradient(cx - gx, cy - gy, cx + gx, cy + gy); 
    gradient.addColorStop(0, "black"); 
    gradient.addColorStop(.5, "white"); 
    gradient.addColorStop(1, "black"); 

    return gradient; 


    }