В этой статье мы разберём как делается на canvas JavaScript снеговик, тут будет очень простой пример, но в цели вы сможете его легко дополнить.
Также посмотрите статью «Снеговик на простом CSS», думаю вам тоже будет очень интересно.
HTML:
Для начала как всегда нужно не много настроить HTML, но тут всё просто, вам нужен элемент canvas, вот и всё.
1 2 | <canvas id="canvas" width="200" height="200"></canvas> <script src="script.js"></script> |
Тут как видите мы просто создаём canvas элемент и подключаем файл с JavaScript.
JavaScript:
Теперь перейдём к JavaScript, тут тоже всё просто, в начале нам надо получить canvas элемент и настроить его для рисования.
1 2 3 4 | // Получаем элемент canvas let canvas = document.getElementById('canvas'); // Настройка canvas для 2d рисования let ctx = canvas.getContext('2d'); |
Дальше мы создадим функцию для создания кругов, она нам нужна, так как снеговик по сути будет состоять только из кругов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Создаём функцию для создания круга let circle = function (x, y, radius, fillCircle) { // Начинаем контур ctx.beginPath(); // Назначаем размер линии ctx.lineWidth = 1; // Рисуем круг ctx.arc(x, y, radius, 0, 2 * Math.PI, false); // Если надо закрасить круг if (fillCircle) { // Закрашиваем круг ctx.fill(); } else { // Делаем только обводку ctx.stroke(); } }; |
В начале мы назначаем функцию переменной, она принимает несколько параметров, первые это координаты по X и Y соответственно, следующие определяет радиус, потом идёт булин значение, которое определяет, нужно закрашивать круг или нет.
Дальше назначаем начало рисования, потом назначаем размер линии, и рисуем круг, потом проверяем, надо его закрашивать или нет.
Теперь сделаем функцию для рисования всего снеговика:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // Создаём функцию для рисования снеговика let drawSnowman = function (x, y) { // Назначаем цвет линий ctx.fillStyle = "Black"; // Рисуем туловище и голову circle(x + 50, y + 110, 40, false); circle(x + 50, y + 40, 30, false); // Рисуем глаза circle(x + 40, y + 35, 5, true); circle(x + 60, y + 35, 5, true); // Рисуем пуговицы circle(x + 50, y + 90, 5, true); circle(x + 50, y + 110, 5, true); circle(x + 50, y + 130, 5, true); // Делаем цвет для рисования оранжевым ctx.fillStyle = "Orange"; // Рисуем нос circle(x + 50, y + 45, 5, true); }; |
Тут всё просто, параметрами задаём положение снеговика, потом назначаем цвет для рисования чёрный, и первым делом рисуем туловище и голову, потом глаза и пуговицы, и последние, меняем цвет для рисования на оранжевый и рисуем нос.
Вызываем функцию которую тока что создали:
1 | drawSnowman(0, 0); |
Вот что у нас должно получиться:
Как видите очень простой снеговик получился, но в целом уже на базе этого вы можете сделать что-то посложнее.
Вывод:
В этой короткой статье вы прочитали как делается снеговик на JavaScript c использованием Canvas, думаю вам было интересно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...