<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Canvas и JavaScript. Пчела

Canvas и JavaScript. Пчела

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


Canvas и 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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.