На этом уроке нарисуем пчелу с помощью окружностей и анимируем ее так, чтобы она летала. Создание анимации в JavaScript состоит из повторяющегося набора действий. Сначала рисуется объект, затем он стирается и перерисовывается в другом месте. Так возникает ощущение движения объекта.
На этом уроке нарисуем пчелу с помощью окружностей и анимируем ее так, чтобы она летала. Создание анимации в JavaScript состоит из повторяющегося набора действий. Сначала рисуется объект, затем он стирается и перерисовывается в другом месте. Так возникает ощущение движения объекта.
Создание окружности с заливкой и с обводкой
Для рисования пчелы нам понадобиться четыре круга, один из которых будет заполнен цветом (тело пчелы). Создадим переменную circle и присвоим ей функцию, которая и будет создавать эти окружности. Передадим функции координаты окружности, радиус и заливку. С помощью метода arc нарисуем полный круг по часовой стрелке. Условие if-else проверит соответствует ли аргумент fillCircle значению true. Если условие верно, то круг будет заполнен цветом. В противном случае, мы получим круг с обводкой.
const circle = function (x, y, radius, fillCircle) {
ctx.beginPath()
ctx.arc(x, y, radius, 0, Math.PI * 2, false)// метод arc создает окружность
if (fillCircle) {// проверяем верно ли условие
ctx.fill()//рисуем окружность с заливкой цветом
} else {
ctx.stroke()//иначе рисуем обводку
}
};
Отрисовка пчелы
Создадим функцию для рисования пчелы drawBee. С помощью функции circle рисуем набор окружностей со своими координатами и радиусами.
function drawBee(x, y) {
ctx.lineWidth = 2 // ширина контура
ctx.strokeStyle = 'black' // цвет обводки
ctx.fillStyle = 'gold' // цвет заливки
circle(x, y, 8, true)
circle(x, y, 8, false)
circle(x - 5, y - 11, 5, false)
circle(x + 5, y - 11, 5, false)
circle(x - 2, y - 1, 2, false)
circle(x + 2, y - 1, 2, false)
};
Обновление позиции пчелы
Создадим новую функцию update, которая будет обновлять координаты позиции пчелы. Наша пчела будет смещаться случайным образом.
function update(coordinate) {
let offset = Math.random() * 4 - 2 // формула случайного смещения
coordinate += offset // изменение координат на величину смещения
if (coordinate > 200){ // проверка нахождения пчелы в пределах холста
coordinate = 200
}
if (coordinate < 0) {
coordinate = 0
}
return coordinate // возвращение координаты
};
Запуск анимации
Задаем начальный координаты x,y для пчелы относительно холста. Каждые 30 секунд с помощью метода setInterval запускаем функцию, которая очищает холст, рисует пчелу с координатами x,y и обновляет координаты позиции пчелы.
const canvas = document.getElementById('canvas') // получаем холст
const ctx= canvas.getContext('2d') // получаем контекст рисования
let x = 100
let y = 100
setInterval(function () {
ctx.clearRect(0, 0, 200, 200) // очищение холста
drawBee(x, y) // позиция пчелы
x = update(x) // обновление значения x
y = update(y) // обновление значения y
ctx.strokeRect(0, 0, 200, 200) // обводка границ холста
}, 30)
Пчела случайным образом летает по экрану в пределах границ холста.
Посмотрите пример на CodePen
