Canvas. Анимация текста

В этой статье я Вам покажу как можно создать анимацию текста при помощи Canvas.

В своем коде Вы можете играться с разными шрифтами, цветом и размером шрифта. Функцию реализации я приведу ниже, после некоторых объяснений тех методов и функций, которые были здесь использованы.

Методы ctx canvas для работы с текстом

Рассмотрим некоторые полезные методы ctx canvas, которые я использовала в  функции рисования текста:

ctx.font - задает стиль текста. С его помощью можно задать font-family, font-style, font-weight, и т.д.

ctx.font="30px Arial";

ctx.strokeStyle - задает или возвращает цвет, градиент или шаблон, используемый для элемента.

ctx.strokeStyle="#FF0000";

// Demo with gradient
let gradient=ctx.createLinearGradient(0,0,170,0);

gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

ctx.strokeStyle=gradient;

ctx.fillStyle - задает заливку элементу - цвет, градиент или шаблон. Использование аналогично ctx.strokeStyle.

ctx.setLineDash - устанавливает штриховой шаблон линии, используемый при создании строк, используя массив значений, который задает чередующиеся длины элементов и промежутков.

В примере ниже мы рисуем штриховую линию и задаем отступы при помощи setLineDash

ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(400, 50);
ctx.stroke();

ctx.strokeText - метод нарисовать текст (без заливки). Цвет текста по умолчанию - черный. Принимает такие параметр: text (строка значений), x, y (начальные координаты), maxWidth (optional).

ctx.strokeText("Hello World!",10,50);

ctx.fillText - метод рисует заполненный текст на холсте. Цвет текста по умолчанию черный.
Использование аналогично ctx.strokeText.

ctx.measureText - возвращает объект, который содержит ширину указанного текста, в пикселях.

Canvas Animation

Мы рассмотрели нужные нам методы для работы с текстом при помощи canvas. Теперь разберемся, что такое requestAnimationFrame и как оно работает.

Функция RequestAnimationFrame была предложена Mozilla (создатели Firefox), которая впоследствии усовершенствовалась командой WebKit (Chrome и Safari). Она обеспечивает встроенный API для запуска любых типов анимации в браузере (DOM элементов, canvas, WebGL и т.д.).

Принцип работы приблизительно такой - мы обьявляем функцию, в которой описан 1 шаг анимации, после передаем ее обработчику requestAnimationFrame.

function run() {
  requestAnimationFrame(run);
  // код одного шага анимации
}
run();

Анимация текста - функция реализации

Теперь, я думаю, код представленный ниже будет понятен. Для удобства значения шрифта, текста и т.д. я помещала в константы, а так же использовала функцию getValue, что бы получать пикстельное значение из % относительно какой-то величины, а в posStartText я устанавливала начальные значения с которого будет рисоваться текст.

const BASE_COLOR = '#212121';
const TEXT = 'Demo Animation';
const FONT_FAMILY = 'Arial';
const FONT_SIZE_BIG = '50px';
const FONT_SIZE_MEDIUM = '50px';
const SPEED = 10;
let dashLen = 220;
let dashOffset = dashLen;
let k = 0;

window.onload = function() {
  const wW = window.innerWidth;
  let contentBox = document.getElementById('canvasElement');
  let canvas = document.getElementById('animation');
  let ctx = canvas.getContext('2d');
  
  canvas.width = wW;
  canvas.height = 100;

  let getValue = (val, num) => {
    return (val * num) / 100
  }

  let posStartText = {
    x: getValue(wW, 2),
    y: 50
  };

  let drawText = () => {
    ctx.font =  (wW > 800) ? `${FONT_SIZE_BIG} ${FONT_FAMILY}` : `${FONT_SIZE_MEDIUM} ${FONT_FAMILY}`;
    ctx.strokeStyle = ctx.fillStyle = BASE_COLOR;
    ctx.setLineDash([dashLen - dashOffset, dashOffset - SPEED]);
    dashOffset -= SPEED;
    ctx.strokeText(TEXT[k], posStartText.x, posStartText.y);

    if (dashOffset > 0) {
      requestAnimationFrame(drawText);
    } else {
      ctx.fillText(TEXT[k], posStartText.x, posStartText.y);
      dashOffset = dashLen;
      posStartText.x += ctx.measureText(TEXT[k++]).width + 5 * Math.random();
      
      ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());
      ctx.rotate(Math.random() * 0.005);
      
      if (k < TEXT.length) {
        requestAnimationFrame(drawText);
      }
    }
    
  }
  drawText();
}

Enjoy 🙂

animation, canvas, HTML, requestAnimationFrame, text, анимация