Как сделать снеговик на Canvas JS

Метки: / / /

В этой статье мы разберём как делается на canvas JavaScript снеговик, тут будет очень простой пример, но в цели вы сможете его легко дополнить.

Также посмотрите статью «Снеговик на простом CSS», думаю вам тоже будет очень интересно.

HTML:

Для начала как всегда нужно не много настроить HTML, но тут всё просто, вам нужен элемент canvas, вот и всё.

Тут как видите мы просто создаём canvas элемент и подключаем файл с JavaScript.

JavaScript:

Теперь перейдём к JavaScript, тут тоже всё просто, в начале нам надо получить canvas элемент и настроить его для рисования.

Дальше мы создадим функцию для создания кругов, она нам нужна, так как снеговик по сути будет состоять только из кругов.

В начале мы назначаем функцию переменной, она принимает несколько параметров, первые это координаты по X и Y соответственно, следующие определяет радиус, потом идёт булин значение, которое определяет, нужно закрашивать круг или нет.

Дальше назначаем начало рисования, потом назначаем размер линии, и рисуем круг, потом проверяем, надо его закрашивать или нет.

Теперь сделаем функцию для рисования всего снеговика:

Тут всё просто, параметрами задаём положение снеговика, потом назначаем цвет для рисования чёрный, и первым делом рисуем туловище и голову, потом глаза и пуговицы, и последние, меняем цвет для рисования на оранжевый и рисуем нос.

Вызываем функцию которую тока что создали:

Вот что у нас должно получиться:

Готовый снеговик на canvas

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

Вывод:

В этой короткой статье вы прочитали как делается снеговик на JavaScript c использованием  Canvas, думаю вам было интересно.

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии