计算canvas渐变的旋转

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

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

但我似乎无法理解将角度（弧度）转换为将产生相同角度的渐变大小所需的数学（我所指的角度垂直于渐变的方向，所以a 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); 

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

未说明，但如果您需要根据角度和方框计算线的长度，您可以使用正弦定律 （以这种方式使用 ）。 以下示例使用固定半径。 您还可以通过计算斜边来使用（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(); } 

 Angle: