javascript - 如何旋转线性渐变？

Question

如何使我的白线在底部矩形的点与点之间完全成对 Angular 线？

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的选择控制渐变的宽度；上面的值仅仅给出了类似于上面代码中使用的值。