Контролируем canvas с помощью объектов JavaScript.

Перевод статьиControlling the Canvas with JavaScript Objects
Автор статьи: Rachel Smith.

Нет ничего сложного в том, чтобы нарисовать на канве круг.

See the Pen oLipB by Rachel Smith (@rachsmith) on CodePen.

Это же можно сказать и о рисовании 200 кругов на канве, что с легкостью делается с помощью цикла for.

See the Pen CbKlx by Rachel Smith (@rachsmith) on CodePen.

Но если нам понадобится нарисовать 200 кругов, которые впоследствии должны перемещаться или если мы захотим сделать все круги разного цвета и размера? Нам также может понадобиться узнать местоположение каждого круга в любой из определенных кадров анимации.

При создании анимации на canvas, наступает момент времени, когда необходимо организовать все объекты и отслеживать получаемую в результате общую картину. Мы, несомненно, можем упростить задачу, воспользовавшись библиотеками типа Fabric, Easel или Paper, но на мой взгляд для создания обычной canvas анимации задействование таких громоздких инструментов будет излишним. Разобравшись наконец с тем, как с помощью объектов можно контролировать канву, мы тем самым поймем, что происходит в ядре предназначенных для работы с Canvas библиотек, переложив на их плечи более изощренные и сложные задачи.

Представляем объект Circle.

function Circle(x,y,rad,color) {
var _this = this;

// constructor
(function() {
_this.x = x || null;
_this.y = y || null;
_this.radius = rad || null;
_this.color = color || null;
})();

this.draw = function(ctx) {
if(!_this.x || !_this.y || _this.radius || _this.color) {
console.error(‘Circle requires an x, y, radius and color’);
return;
}
ctx.beginPath();
ctx.arc(_this.x, _this.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = _this.color;
ctx.fill();
}
}

Объект Circle (*круг) мы наделили несколькими свойствами, а так же методом draw.

Теперь в нашем распоряжении имеется объект, позволяющий контролировать свойства круга. Мы можем создать множество объектов Circle и нарисовать их на канве, использовав для этого анимационный цикл. Кроме того в любой момент времени мы можем проверить место нахождение каждого круга или изменить его свойства.

See the Pen xlosE by Rachel Smith (@rachsmith) on CodePen.

Свойства не должны быть привязаны к позиции, цвет и размер тоже. Они могут представлять число, определяемое такими вещами как вектор (его величина, скорость) или другой, устанавливаемый по отношению к другим объектам показатель.

Самое ценное, на мой взгляд, что мы можем извлечь из использования объекта Circle и его свойств, это возможность без труда применить их в библиотеках серии Tween с целью создания нелинейного движения.

See the Pen Tweening canvas particles by Rachel Smith (@rachsmith) on CodePen.

Не бойтесь экспериментировать. Создаваемые вами частицы не обязательно должны быть круглой формы, это может быть любой объект, который вы способны нарисовать на канве. С помощью JavaScript объектов вы можете создавать неограниченное количество различных анимационных эффектов. С удовольствием познакомлюсь с вашими работами на CodePen.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *