Доброго воскресного дня, дорогие друзья, падаваны и магистры, маленькие дети, а также дети младшего, среднего, старшего, очень старшего и пожилого возраста!
Над нами солнце светит, не жизнь, а благодать!
И хочется то солнце скорей нарисовать!
Вы когда-нибудь хотели стать художником, но в школе на рисовании ставили «двойку»? Я тоже. Но, как говорят, программисты — это художники, только вместо кисти у них клавиатура, а вместо холста — браузер. И сегодня мы с вами создадим два шедевра: весёлый смайлик и лучистое солнышко. Всё — с помощью чистого JavaScript и магии элемента <canvas>.
Статья будет полезна новичкам, которые хотят разобраться с рисованием на веб-страницах, а тем, кто уже знает JavaScript, будет просто весело. Поехали! 🚀
🧑🎨 Зачем вообще рисовать кодом?
Допустим, вы делаете игру, анимацию, открытку или просто хотите украсить сайт. Можно, конечно, вставить картинку из фотошопа, но куда интереснее нарисовать что-то самому, да ещё и управлять этим кодом. К тому же, когда вы научитесь рисовать смайлик, вы сможете нарисовать и машину, и котика, и даже портрет своей кошки (хотя с последним, возможно, придётся потрудиться).
Canvas — это наш холст. Он позволяет рисовать линии, круги, прямоугольники, текст и вообще всё, что душе угодно. И сегодня мы используем его для двух простых, но культовых объектов: смайлик — символ интернет-радости, и солнышко — символ хорошего настроения.
🖌️ Знакомство с Canvas
Прежде чем рисовать, создадим холст. Вставляем в HTML:
<canvas id="myCanvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>
А в JavaScript получаем контекст:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
Теперь всё, что мы будем делать, — это отдавать команды контексту. Всё как в реальном рисовании: поднимаем кисть, ставим цвет, рисуем фигуры.
😊 Рисуем смайлик
Шаг 1: Голова
Смайлик без головы — как программист без кофе. Рисуем круг:
javascript
ctx.beginPath();
ctx.arc(250, 200, 80, 0, Math.PI * 2);
ctx.fillStyle = '#FFD966'; // цвет лица
ctx.fill();
ctx.strokeStyle = '#000';
ctx.stroke();
Комментарий: arc(x, y, радиус, начальный_угол, конечный_угол) — главный метод для кругов. Углы задаются в радианах, поэтому полный круг — это 2π.
Шаг 2: Глаза
Глаза — две маленькие чёрные точки. Добавляем после головы, чтобы они были сверху:
javascript
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(220, 180, 8, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(280, 180, 8, 0, Math.PI * 2);
ctx.fill();
Можно сделать глаза побольше или добавить блики (белые круги внутри) — но мы для простоты ограничимся классикой.
Шаг 3: Улыбка
Самая важная деталь. Без улыбки это будет просто круг с точками, а с улыбкой — смайлик. Рисуем дугу:
javascript
ctx.beginPath();
ctx.arc(250, 220, 50, 0.1, Math.PI - 0.1);
ctx.strokeStyle = '#000';
ctx.lineWidth = 5;
ctx.stroke();
Углы для дуги подобраны опытным путём. Если хотите улыбку пошире, поэкспериментируйте с углами.
Вот и готов наш первый шедевр! 🎉
Полный код смайлика:
html
<canvas id="smileCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('smileCanvas');
const ctx = canvas.getContext('2d');
// Голова
ctx.beginPath();
ctx.arc(250, 200, 80, 0, Math.PI * 2);
ctx.fillStyle = '#FFD966';
ctx.fill();
ctx.stroke();
// Глаза
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(220, 180, 8, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(280, 180, 8, 0, Math.PI * 2);
ctx.fill();
// Улыбка
ctx.beginPath();
ctx.arc(250, 220, 50, 0.1, Math.PI - 0.1);
ctx.stroke();
</script>
Поздравляю, вы только что нарисовали смайлик кодом. Теперь можете смело говорить, что вы — художник-программист.
☀️ Рисуем солнышко
С солнышком придётся чуть сложнее. У него есть круг и лучи. Если рисовать каждый луч отдельно, получится много однотипного кода. На помощь приходят циклы и трансформации.
Шаг 1: Основа — круг
Для солнышка выберем жёлтый цвет и расположим в центре холста.
javascript
const canvas = document.getElementById('sunCanvas');
const ctx = canvas.getContext('2d');
// Круг-основа
ctx.beginPath();
ctx.arc(250, 200, 70, 0, Math.PI * 2);
ctx.fillStyle = '#FFDD44';
ctx.fill();
ctx.strokeStyle = '#FFAA00';
ctx.stroke();
Шаг 2: Лучи
Лучи — это либо линии от края круга наружу, либо треугольники. Мы нарисуем треугольные лучи с помощью поворотов холста. Идея: рисуем один луч, затем поворачиваем холст и рисуем следующий.
javascript
ctx.fillStyle = '#FFAA44';
for (let i = 0; i < 12; i++) {
ctx.save(); // сохраняем состояние холста
ctx.translate(250, 200); // перемещаем начало координат в центр солнца
ctx.rotate(i * (Math.PI * 2 / 12)); // поворачиваем на угол для луча
ctx.beginPath();
ctx.moveTo(70, 0); // от внешнего края круга
ctx.lineTo(110, -15); // кончик луча вверх
ctx.lineTo(110, 15); // кончик луча вниз
ctx.closePath();
ctx.fill();
ctx.restore(); // восстанавливаем исходное состояние
}
Почему save() и restore()? Потому что translate и rotate накапливаются, и без восстановления каждый следующий луч будет поворачиваться всё сильнее. Так мы рисуем 12 лучей.
Шаг 3: Добавим личико
Чтобы солнышко было дружелюбным, нарисуем ему глаза и улыбку, как у смайлика:
javascript
// Глаза
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(220, 180, 6, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(280, 180, 6, 0, Math.PI * 2);
ctx.fill();
// Улыбка
ctx.beginPath();
ctx.arc(250, 220, 40, 0.1, Math.PI - 0.1);
ctx.stroke();
Теперь у нас есть весёлое солнышко, которое даже в дождливый день поднимет настроение.
🌀 Анимация: пусть солнышко крутится!
А теперь добавим магии — заставим лучи вращаться. Это придаст солнышку динамики и сделает его ещё круче.
Для анимации используем requestAnimationFrame. Будем перерисовывать солнышко на каждом кадре, увеличивая угол поворота лучей.
Вот полный код анимированного солнышка:
html
<canvas id="animatedSun" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('animatedSun');
const ctx = canvas.getContext('2d');
let angle = 0;
function drawSun() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Круг-основа
ctx.beginPath();
ctx.arc(250, 200, 70, 0, Math.PI * 2);
ctx.fillStyle = '#FFDD44';
ctx.fill();
ctx.stroke();
// Лучи
ctx.fillStyle = '#FFAA44';
for (let i = 0; i < 12; i++) {
ctx.save();
ctx.translate(250, 200);
ctx.rotate(angle + i * (Math.PI * 2 / 12));
ctx.beginPath();
ctx.moveTo(70, 0);
ctx.lineTo(110, -15);
ctx.lineTo(110, 15);
ctx.closePath();
ctx.fill();
ctx.restore();
}
// Личико (остаётся на месте)
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(220, 180, 6, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(280, 180, 6, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(250, 220, 40, 0.1, Math.PI - 0.1);
ctx.stroke();
angle += 0.02; // скорость вращения
requestAnimationFrame(drawSun);
}
drawSun();
</script>
Теперь наше солнышко весело вращает лучами — идеальный вариант для интерактивной открытки или просто для поднятия настроения.
🎯 Зачем вам это?
Возможно, вы спросите: «Ну нарисовал я смайлик, и что?». А то, что вы теперь знаете, как:
- рисовать базовые фигуры на canvas;
- использовать трансформации (translate, rotate);
- создавать простую анимацию;
- писать код, который может стать основой для игр, генераторов мемов, анимированных открыток и даже мини-приложений.
А ещё вы отлично проведёте время и, возможно, удивите друзей, отправив им ссылку на страницу с вращающимся солнышком. Или нарисуете своего собственного персонажа — было бы желание.
📝 Домашнее задание с юмором
Если вам понравилось, попробуйте добавить:
- Смайлику — подмигивание (анимируйте один глаз).
- Солнышку — облака, которые проплывают мимо.
- Цвета — сделайте солнышко радужным или добавьте смайлику румянец.
И помните: настоящий программист не тот, кто не ошибается, а тот, кто умеет находить и исправлять ошибки. А ещё — тот, кто может нарисовать смайлик без единого изображения.
❤️ Если статья была полезной...
Поставьте лайк — это поможет солнышку светить ярче!
Подпишитесь, чтобы не пропустить новые эксперименты с кодом.
В комментариях делитесь своими рисунками — интересно посмотреть, что у вас получилось. А если возникли вопросы — смело задавайте, разберёмся вместе.
А теперь идите и творите! 🎨🖌️