Привет Хабр! Недавно я наткнулась на интересную вещицу, создающую на странице эффект конфетти.
Я решил взглянуть на то, что внутри, как оно работает, и познакомиться с полотном поближе.
Подробности под катом.
Введение
Повествование будет вестись с точки зрения человека, впервые в жизни увидевшего холст (ладно, второй, первый был вот эта статья с Хабра о фрактальных снежинках ) и хочет почерпнуть различные полезные моменты, которые он, возможно, захочет использовать в будущем.Началось с исходный код библиотеки холст-конфетти .
Настройки
Удобно представить себе некую пушку, расположенную в определенной точке.источник , наклоненный под углом угол и выпускает заряд в виде конуса, который отклоняется от направления выстрела влево и вправо под углом распространение со скоростью startVelocity .
Затем частицы начинают терять скорость в зависимости от сопротивления воздуха.
разлагаться и упасть под действием силы тяжести сила тяжести .
Также есть параметры количества частиц, цвета, формы, размера (particleCount, Colors, Shapes, Scalar).
Достаточно добавить только интересующие вас опции, остальные будут добавлены по умолчанию.
confetti({ particleCount: 100, startVelocity: 30, spread: 360, origin: { x: Math.random(), y: Math.random() - 0.2 } }
Полезные моменты внутри
То, что обеспечивает 60 кадров в секунду, используя запросАнимацияFrame , если есть или откатывается на 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 };
}());Заполнение всей видимой области страницы холстом с помощью создатьЭлемент , AppChild , ширина клиента , высота клиента
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 в методе обновлять
context.clearRect(0, 0, size.width, size.height);Для создания каждого кадра вызывается update, внутри которого для каждой «конфетки» вызывается код, вычисляющий ее геометрические координаты и рисующий ее с помощью контекстных методов.
начало пути , переместитьTo , линияTo , closePath И наполнять .
Кроме того, каждый фетиш отслеживает, сколько кадров обновления у него было, а затем, когда у всех фетишей закончатся кадры, анимация сообщит о своем завершении.
function updateFetti(context, fetti) {
Теги: #разработка #Процесс обучения в IT #JavaScript #html5 #canvas #confetti
-
Интервью С Главой Российского Офиса Kingston
19 Oct, 24 -
Перекресток. Главы 2 И 3
19 Oct, 24 -
Как Боты Помогают Тестировать Игры
19 Oct, 24 -
Каково Преподавать В It-Курсе?
19 Oct, 24 -
Мтс Ехал На Палке
19 Oct, 24 -
Земанта - Сервис Для Блоггеров
19 Oct, 24 -
Зачем Scada, Когда Есть .Net?
19 Oct, 24
