@Gagatyn
Самоучка

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

На вход приходит число, угол в диапазоне 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 и т.д., то начальная точка изменяется.

Подскажите, как рассчитать правильно?
  • Вопрос задан
  • 33 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы