计算画布渐变的旋转 [英] Calculate rotation of canvas gradient

问题描述

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

I知道这可以通过在创建渐变（ ctx.createLinearGradient（x1，y1，x2，y2））时使用不同的值来实现：

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

总之，如何将弧度（数量）转换为X的Y形？

JSFiddle
$ b

_{（所以没有人浪费t继承人时间：我特别不希望在这种情况下使用 context.rotate（） c $ c>）}


解决方案

您可以使用带cos和sin的角度来定义提供渐变的线条。剩下的唯一东西就是给出长度：



  var length = 100，angle = 0; 
 ctx.createLinearGradient（x，y，x + Math.cos（angle）* length，y + Math.sin（angle）* length）; 
  

渐变将沿着（垂直）给出的线渲染。 b


没有说明，但是如果您需要根据角度和方框计算线的长度，您可以使用正弦法则（用于这种方式）。以下示例使用固定半径。您还可以通过计算斜边使用（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; //根据角度计算梯度线x2 = x1 + Math.cos（angle）* length; y2 = y1 + Math.sin（角度）*长度; //创建并渲染渐变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>

I'm trying to use a gradient to fill an area of a canvas, but I would like to be able to set the angle of the gradient.

I know this is possible by using different values in the creation of the gradient (ctx.createLinearGradient(x1, y1, x2, y2)) as seen here:

But I can't seem to get my head around the maths needed to convert an angle (radians) to a gradient size that will produce the same angle (The angle I'm referring to is perpendicular to the direction of the gradient, so a 0 radian angle would show the gradient on the right)

In short, how can I convert (quantity) of radians into an X by Y shape?

JSFiddle

_{(So no one wastes their time: I specifically don't want to use a context.rotate() in this case)}

解决方案

You can use the angle with cos and sin to define the line that gives the gradient. The only thing left then is to give the length:

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

The gradient will be rendered along (perpendicular) to the line given.

Not stated, but if you need to calculate the length of the line depending on the angle and box you can use the law of sines to do so (used in this way). The example below uses a fixed radius. You can also use max length from (x1, x2) by calculating the hypotenuse: length = Math.sqrt(diffX*diffX + diffY*diffY);.

Example

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>

这篇关于计算画布渐变的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！