如何旋转线性渐变？答案

【问题标题】：How can I rotate a linear gradient?如何旋转线性渐变？
【发布时间】：2016-06-07 01:41:17
【问题描述】：

如何使我的白线从底部矩形的点到点完全对角线？

  <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);

【问题讨论】：

标签： javascript html canvas

【解决方案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);

&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;

radius的选择控制渐变的宽度；上面的值仅仅给出了与上面代码中使用的值相似的值。

【讨论】：

好的，但不需要用三角函数来回旋。不需要任何数学：createLinearGradient(0,_canvas.height,_canvas.width,200)
@markE：你说得对——交换坐标非常接近旋转 90 度。不过，需要数学来了解原因。
@Amadan 你能看看我的问题很相似吗→stackoverflow.com/questions/67346704/…

【解决方案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; 


    }

【讨论】：

你能看看我的问题很相似吗→stackoverflow.com/questions/67346704/…