计算画布渐变的旋转答案

【问题标题】：Calculate rotation of canvas gradient计算画布渐变的旋转
【发布时间】：2016-05-14 12:00:00
【问题描述】：

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

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

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

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

$(document).ready(function(){
    var canvas = document.getElementById("test");
    var ctx = canvas.getContext("2d");
    var angle = 0.5;
    
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.arc(100, 100, 100, 0, -angle, true);
    ctx.lineTo(100, 100);
    ctx.closePath();

    // Convert angle into coordinates to tilt the grad
    // grad should be perpendicular to the top edge of the arc
    var grad = ctx.createLinearGradient(0, 0, 0, 100);
    
    grad.addColorStop(0, "rgba(0,0,0,0)");
    grad.addColorStop(1, "rgba(0,0,0,0.8)");
    ctx.fillStyle = grad;
    ctx.fill();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="test" width="500" height="500"></canvas>

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

【问题讨论】：

嘿@DBS，你成功了吗？我正在尝试使用画布，尤其是 konva，但似乎无法复制 CSS 线性渐变的效果。如果你有任何想法，lmk。如果你想看看，这里是代码框 → codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/…
你能看看我的问题很相似吗→stackoverflow.com/questions/67346704/…

标签： javascript jquery html canvas

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

【讨论】：