Тема 18 Малюємо на полотні (Лінії або ж контури)

Малюємо на полотні (Лінії або ж контури)

Малюємо лінії або ж контури

Лінії на полотні звуться контурами. Щоб намалювати контури за допомогою полотна, вам необхідно скористатися х та у координатами, які встановлять початкову та кінцеві точки кожної із ліній. Користуючись прицільною комбінацією початкових та кінцевих координат, ви зможете намалювати на полотні будь-які фігурки. Наприклад, ось як ви можете намалювати небесно-блакитну літеру Х:

ctx.strokeStyle = "Turquoise"; // Встановлюємо колір лінії (межі) для малювання
ctx.lineWidth = 4; // Встановлюємо товщину лінії
ctx.beginPath(); // Починаємо новий шлях (цей метод необхідний перед малюванням ліній або фігур)
ctx.moveTo(10, 10); // Переміщаємо "перо" (відправляємо її на точку (10, 10)), не малюючи лінію
ctx.lineTo(60, 60); // Малюємо лінію від поточної позиції (10, 10) до точки (60, 60)
ctx.moveTo(60, 10); // Переміщаємо "перо" до точки (60, 10) без малювання лінії
ctx.lineTo(10, 60); // Малюємо лінію від точки (60, 10) до точки (10, 60)
ctx.stroke(); // Завершуємо малювання ліній і застосовуємо стиль

Зверніть увагу, що великі літери обов'язкові. Спробуйте написати ctx.lineWidth (з маленької літери W), і ви побачите, що програма ігнорує малювання потовщеної лінії.

Малюємо обрис прямокутника

Щоб малювати контур (обрис) прямокутника, використовуються методи малювання ліній. Але є більш простий спосіб — за допомогою спеціального методу strokeRect. Ось як це працює:

Метод strokeRect(x, y, width, height):

x і y — це координати верхнього лівого кута прямокутника.
width і height — це ширина і висота прямокутника.

Цей метод малює лише контур прямокутника (обрис) без заповнення. Приклад:

ctx.strokeStyle = "Pink";  // Встановлюємо колір обрису на рожевий
ctx.lineWidth = 2;  // Встановлюємо товщину лінії на 2 пікселя
ctx.strokeRect(10, 10, 100, 20);  // Малюємо обрис прямокутника

Як працюють інші методи (для ліній)

Можна також створити обрис за допомогою moveTo і lineTo. Це потребує більше кроків:

moveTo(x, y) — переміщуємо «перо» на вказану точку, не малюючи лінію.
lineTo(x, y) — малює лінію до нової точки.

Якщо ми хочемо намалювати обрис прямокутника за допомогою цих методів, треба вручну провести лінії по кожній стороні прямокутника. Щоб малювати контур (обрис) прямокутника, використовуються методи малювання ліній. Але є більш простий спосіб — за допомогою спеціального методу strokeRect. Ось як це працює:

ctx.beginPath();  // Починаємо нову траєкторію
ctx.moveTo(10, 10);  // Починаємо з верхнього лівого кута
ctx.lineTo(110, 10);  // Малюємо верхню лінію
ctx.lineTo(110, 30);  // Малюємо праву лінію
ctx.lineTo(10, 30);   // Малюємо нижню лінію
ctx.closePath();      // Закриваємо контур
ctx.stroke();         // Малюємо лінії

Заповнюємо контури

До цього часу ми вже ознайомилися з методами strokeRect, fillRect та stroke, що використовуються для малювання обрисів прямокутників, заповнення їх кольором та створення контурів відповідно. Еквівалент методу fillRect для контурів зветься fill. Щоб заповнити закриту контурну лінію кольором, замість того, щоб малювати її обрис, ви можете скористатися методом fill, не застосовуючи метод stroke. Наприклад, ви можете скористатися кодом, що поданий нижче, щоб намалювати ось такий простенький будиночок з відтінком небесної блакиті:

ctx.fillStyle = "SkyBlue";  // Встановлюємо колір заповнення на блакитний
ctx.beginPath();  // Починаємо новий шлях
ctx.moveTo(100, 100);  // Починаємо малювати з точки (100, 100)
ctx.lineTo(100, 60);  // Малюємо лінію до точки (100, 60)
ctx.lineTo(130, 30);  // Малюємо лінію до точки (130, 30)
ctx.lineTo(160, 60);  // Малюємо лінію до точки (160, 60)
ctx.lineTo(160, 100);  // Малюємо лінію до точки (160, 100)
ctx.lineTo(100, 100);  // Закриваємо контур, повертаючись до початкової точки (100, 100)
ctx.closePath();  // Закриваємо шлях, забезпечуючи замкнутість фігури
ctx.fill();  // Заповнюємо фігуру кольором, визначеним в ctx.fillStyle (в даному випадку - SkyBlue) (скопіювати код)

Ось як цей код працює:

Задавши колір — SkyBlue, ми розпочали малювати контур за допомогою beginPath i перейшли до нашої початкової точки координат (100, 100), використовуючи moveTo. Далі ми викликаємо метод lineTo п'ять разів для кожного із кутів будинку, використовуючи п'ять наборів координат. Фінальний виклик до lineTo довершує контур, повертаючись назад на початкову точку (100, 100). Зрештою, ми викликаємо метод fill, який заповнює наш контур вибраним кольором SkyBlue.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC