@Mileon

Как сделать текст по спирали на канвасе?

Код из Angular:
const wrap = this.spiralText.nativeElement;
          wrap.width = 400;
          wrap.height = 400;
          const ctx: CanvasRenderingContext2D = wrap.getContext('2d');
          ctx.font = String(
            +this.FONT_SETTINGS.fontWeight + ' ' + this.FONT_SETTINGS.fontSize + 'px ' + this.FONT_SETTINGS.font
          );
          const tElem = this.text?.text.split('')!;

          let centerX = ctx.canvas.width / 2,
            centerY = ctx.canvas.height / 2;

          ctx.clearRect(0, 0, 400, 400);

          ctx.moveTo(centerX, centerY);
          ctx.beginPath();
          for (let i = 0; i < 400; i++) {
            let angle = 0.1 * i;
            let x = centerX + 4 * angle * Math.cos(angle);
            let y = centerY + 4 * angle * Math.sin(angle);
            ctx.fillText(tElem[i], x, y, 25);
          }

Есть ли технологии, позволяющие сделать это более изящно?
Как вставлять буквы так, что бы они принимали нужный угол и как задавать этот угол путем fillText?
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
просто накидал пример. Думаю посмотрев его вы сможете внести нужные правки в ваш код.

спираль закручена против часовой стрелки


спираль закручена по часовой стрелки

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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