Как рассчитать точки для canvas градиента?

Question

[Gagatyn]

На вход приходит число, угол в диапазоне 0-360.

Для линейного градиента, где 4 значения, т.е. 2 точки, начальная и конечная.

/*ctx.createLinearGradient(
          0 / * x0 * /,
          0 / * y0 * /,
          0 / * x1 * /,
          0 / * y1 * /
 );*/

const findPointsAngle = ( angle,  /* canvas 300x400 */ { width, height } ) => {
    let r = height;
    let x0 = width / 2;
    let y0 = 0;

    let x1 = Math.floor(x0 + r * Math.sin(angle)/ 2);
    let y1 = Math.floor(y0 + r * Math.cos(angle) / 2);

    if (angle === +0) {
      y1 = height;
    }

    return { x0, y0, x1, y1 };
  };

К примеру, на вход пришло 2 градуса
функция выведет:
{ x0: 150, y0: 0, x1: 513, y1: -167 }
А надо, приблизительно:
{ x0: 150, y0: 0, x1: 150, y1: 400 }

Так же, если под 180 и т.д., то начальная точка изменяется.

Подскажите, как рассчитать правильно?

Comments

[RAX7]

https://9elements.com/blog/gradient-angles-in-css/

[Gagatyn]

RAX7, блин, а не придумал ли я себе проблему

[RAX7]

Gagatyn, а в чем проблема то? по ссылке выше есть демка https://codepen.io/enbee81/pen/zYrXVGo Берешь оттуда функцию getLength (она считает длину градиента), берешь вертикальный отрезок этой длины и поворачиваешь его на нужный угол вокруг центра. Координаты концов отрезка и есть координаты градиента.