Конфетти на канвасе

Привет Хабр! Попалась недавно интересная вещичка , которая создает эффект конфетти на страничке. Решил глянуть , что же там внутри находится, как работает и познакомиться с канвасом поближе. Подробности под катом.

Вступление

Повествование будет вестись с точки зрения человека, который первый раз в жизни увидел канвас ( ладно, второй, первой была вот эта статья с хабра про фрактальные снежинки) и хочет почерпнуть себе разные полезные моменты, которые , возможно, захочется использовать в будущем. Отталкивался от исходного кода библиотечки canvas-confetti.

Настройки

Удобно представить себе некую пушку, которая находится в некой точке origin, наклонена под углом angle и стреляет зарядом в виде конуса, который отклоняется от направления выстрела влево и вправо на угол spread со скоростью startVelocity . Потом частицы начинают терять скорость в зависимости от сопротивления воздуха decay и падать под действием силы тяжести gravity. Еще есть параметры для колличества частиц, цвета, формы, размера ( particleCount, colors, shapes, scalar). Достаточно добавить только интересующие опции, остальные подтянутся по умолчанию.

confetti({
  particleCount: 100,
  startVelocity: 30,
  spread: 360,
  origin: {
    x: Math.random(),
    y: Math.random() - 0.2
  }
}

Полезные моменты внутри

Штука, которая обеспечивает 60 кадров в секунду с помощью requestAnimationFrame , если есть или откатывается к setTimeout

var raf = (function () {
  var TIME = Math.floor(1000 / 60);
  var frame, cancel;
  var frames = {};
  var lastFrameTime = 0;

  if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {
    frame = function (cb) {
      var id = Math.random();

      frames[id] = requestAnimationFrame(function onFrame(time) {
        if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {
          lastFrameTime = time;
          delete frames[id];

          cb();
        } else {
          frames[id] = requestAnimationFrame(onFrame);
        }
      });

      return id;
    };
    cancel = function (id) {
      if (frames[id]) {
        cancelAnimationFrame(frames[id]);
      }
    };
  } else {
    frame = function (cb) {
      return setTimeout(cb, TIME);
    };
    cancel = function (timer) {
      return clearTimeout(timer);
    };
  }

  return { frame: frame, cancel: cancel };
}());

Заполнение канвасом всей видимой области странички с помощью createElement, appendChild, clientWidth, clientHeight

function getCanvas(zIndex) {
    var canvas = document.createElement('canvas');

    canvas.style.position = 'fixed';
    canvas.style.top = '0px';
    canvas.style.left = '0px';
    canvas.style.pointerEvents = 'none';
    canvas.style.zIndex = zIndex;

    return canvas;
  }
// ..... 
document.body.appendChild(canvas);
// .....
function setCanvasWindowSize(canvas) {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
}

Получение двумерного контекста канваса с getContext

var context = canvas.getContext('2d');

Чистка, которая происходит перед отрисовкой каждого кадра с помощью clearRect в методе update

context.clearRect(0, 0, size.width, size.height);

Для создания каждого кадра вызывается update, внутри которого для каждой "конфетиточки" вызывается код, который считает ее геометрические координаты и рисует ее с помощью методов контекста beginPath, moveTo, lineTo, closePath и fill. Также каждая фетишка отслеживает сколько у нее прошло кадров-апдейтов и потом, когда у всех фетишек закончатся кадры, анимация отрапортует о своем завершении.

function updateFetti(context, fetti) {
		// ...
    // пара десятков строк косинусов и синусов, которые посчитают новые координаты для конфетишки
    // ...

    context.fillStyle = 'rgba(' + fetti.color.r + ', ' + fetti.color.g + ', ' + fetti.color.b + ', ' + (1 - progress) + ')';
    context.beginPath();

    // ...
    context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
    context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
    context.lineTo(Math.floor(x2), Math.floor(y2));
    context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));

    context.closePath();
    context.fill();
		
    // ...
		// когда кадры закончатся фетишка отфильтруется из массива частиц для апдейта
    return fetti.tick < fetti.totalTicks;
  }

Заключение

Надеюсь этот пост поможет кому-нибудь быстро ознакомится с рисованием на двумерном канвасе. В исходнике есть много полезного касательно анимации из воркера и геометрии. Желающие могут ознакомиться более детально по ссылке вначале статьи.