计算画布渐变的旋转

Question

我正在尝试使用渐变来填充画布的某个区域，但我希望能够设置渐变的角度。

我知道这可以通过在创建渐变（ctx.createLinearGradient(x1, y1, x2, y2)）中使用不同的值来实现，如下所示：

但我似乎无法理解将角度（弧度）转换为将产生相同角度的渐变大小所需的数学（我所指的角度垂直于渐变的方向） ，所以0弧度角将显示右边的渐变

简而言之，我如何将（数量）弧度转换为X×Y形状？

JSFiddle

_{（所以没有人浪费时间：在这种情况下我特别不想使用context.rotate()）}

Answer 1

您可以使用cos和sin的角度来定义给出渐变的线条。剩下的唯一事情是给出长度：

var length = 100, angle = 0;
ctx.createLinearGradient(x, y, x + Math.cos(angle) * length, y + Math.sin(angle) * length);

渐变将沿着（垂直）呈现给定的线。

未说明，但如果您需要根据角度和方框计算线条的长度，可以使用law of sines来执行此操作（在this way中使用）。以下示例使用固定半径。您还可以通过计算斜边来使用（x1，x2）的最大长度：length = Math.sqrt(diffX*diffX + diffY*diffY);。

实施例

var ctx = c.getContext("2d"),
    x1 = 150, y1 = 150, x2, y2, angle,
    length = 150;

render();
cAngle.oninput = render;

function render() {
  
  angle = +cAngle.value / 180 * Math.PI;

  // calculate gradient line based on angle
  x2 = x1 + Math.cos(angle) * length;
  y2 = y1 + Math.sin(angle) * length;
  
  // create and render gradient
  ctx.fillStyle = ctx.createLinearGradient(x1, y1, x2, y2);
  ctx.fillStyle.addColorStop(0, "#fff");
  ctx.fillStyle.addColorStop(1, "#07f");
  ctx.fillRect(0, 0, 300, 300);
  
  // show definition line
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

<label>Angle: <input id=cAngle max=359 type=range value=0></label><br>
<canvas id=c height=300></canvas>