Canvas – Вступ Малюємо на полотні (Прямокутники)

Уяви, що перед тобою є великий аркуш паперу. На ньому є дві лінії: одна йде горизонтально (зліва направо), а інша вертикально (згори вниз). Це називається координатна система.

Ці лінії перетинаються в одному місці — це початок координат (0, 0), тобто точка, де обидві лінії зійшлися.
У JavaScript Canvas, який дозволяє малювати на екрані, ми можемо ставити малюнки точно там, де хочемо, використовуючи ці лінії:

Тому, щоб намалювати будь-яку фігуру, ми просто говоримо комп'ютеру, де саме на цьому аркуші малювати — скільки кроків вправо (по осі X) і скільки кроків вниз (по осі Y).

Уяви, що ми хочемо створити картину на екрані комп'ютера. Щоб почати, нам потрібен папір, на якому будемо малювати, — це і є Canvas.
Ось що потрібно зробити, щоб створити цей "папір":

1) У HTML ми додаємо спеціальну команду для створення canvas. Це місце де ми будемо малювати:

<canvas id="canvas"></canvas>

2) Тепер, щоб малювати на нашому аркуші, нам потрібно сказати комп'ютеру, що ми хочемо малювати на canvas і як саме:

// Беремо наш "папір" за допомогою його імені
const canvas = document.getElementById("canvas");

// Ось ця команда дає нам спеціальні інструменти для малювання в 2D (або 3D)
const ctx = canvas.getContext("2d");

Змінна ctx це об'єкт, що надає можливість малювати на canvas. Він дозволяє використовувати методи для малювання різних графічних об'єктів, таких як кола та прямокутники, а також виводити текст на сторінку.

3) Тепер ми можемо налаштувати розмір нашого "паперу". Наприклад, ми хочемо, щоб він був квадратним, 500x500 пікселів (це розмір на екрані):

canvas.width = 500;
canvas.height = 500;

4) Тепер ми можемо вибрати колір, яким будемо заповнювати весь наш аркуш. Наприклад, давайте зробимо фон блакитним:

ctx.fillStyle = "lightblue";  // Вибираємо колір

5) Тепер ми можемо заповнити весь аркуш цим кольором:

ctx.fillRect(0, 0, canvas.width, canvas.height);  // Заповнюємо весь аркуш

(0, 0, canvas.width, canvas.height) - ці чотири значення визначають місце і розмір прямокутника (нашого canvas), який буде намальований.
0, 0 — це координати верхнього лівого кута прямокутника на canvas. В даному випадку ми починаємо з самого початку (верхній лівий кут), де координати X і Y дорівнюють 0.
canvas.width — це ширина прямокутника. Ми використовуємо canvas.width, щоб прямокутник охоплював всю ширину canvas.
canvas.height — це висота прямокутника. За допомогою canvas.height ми задаємо висоту прямокутника, щоб він заповнив всю висоту canvas.

Малювання кола

Цей код використовує метод arc(), щоб намалювати коло на полотні з центром у точці (300, 300) та радіусом 100 пікселів:

ctx.beginPath(); //початок малювання фігури
ctx.fillStyle = "green"; //встановлення кольору фігури
ctx.arc(300, 300, 100, 0, Math.PI * 2, true); //малювання кола - аргументи: (x, y, радіус, початок кута, кінець кута, по год. стрілці)
ctx.closePath(); //кінець малювання фігури
ctx.fill(); //вивід фігури на екран

Малювання прямокутника

Цей код використовує метод rect(), щоб намалювати прямокутник на полотні. Прямокутник матиме свій верхній лівий кут у координатах (300, 300) і матиме ширину 200 пікселів і висоту 100 пікселів:

ctx.beginPath(); //початок малювання фігури
ctx.fillStyle = "red"; //встановлення кольору фігури
ctx.rect(300, 300, 200, 100); // малювання прямокутника – агрументи: (x, y, ширина прям., висота прям.)
ctx.closePath(); //кінець малювання фігури
ctx.fill(); //вивід фігури на екран

jQuery — це спеціальна програма (бібліотека), яка полегшує роботу з JavaScript. З її допомогою можна швидше та легше виконувати завдання на веб-сторінці, наприклад, змінювати текст, малювати на сторінці або реагувати на натискання кнопок. Підключення:

Уяви, що ти хочеш намалювати квадрат за допомогою комп'ютера. Для цього нам потрібно сказати комп'ютеру, де почати малювати, який буде розмір і як він має виглядати.

ctx.fillRect(0, 0, 10, 10);

Кроки для створення квадрату

Тож, якщо уявити, що екран — це великий аркуш паперу, ми просто намалюємо маленький квадрат у верхньому лівому кутку цього аркуша.

А тепер спробуймо щось цікавіше. Замість того, щоб малювати лише один квадрат, скористаймося циклом, який намалює нам декілька квадратів, що діагонально опускатимуться вниз по екрану. Вставте в body код з таким вмістом:

<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
for (var i= 0; i < 8; i++) {
ctx.fillRect(i * 10, i * 10, 10, 10);
}
</script>

Запустивши цей код, ви мали б побачити набір із восьми чорних квадратів.

Ми створили for-цикл, що рухається від 0 до 8. Далі, всередині цього циклу, ми викликаємо метод fillRect до рисувального контексту.

Позиції х та у для верхнього лівого кута кожного із квадратів базуються на циклічній змінній. Під час першого кола навколо циклу коли це координатами точки (0, 0), позаяк 0*10 дорівнює 0. Це означає, що коли ми запускаємо код ctx.fillRect(i * 10, і * 10, 10, 10), ми намалюємо квадрат на координатах (0, 0), із шириною та висотою 10 на 10 пікселів.

Під час другого кола по циклу, коли і - це 1, координати зупиняться на відмітці у (10, 10), тому що 1 х 10 дорівнює 10. Цього разу код ctx.fillRect(i * 10, i * 10, 10, 10) малює квадрат на координатах (10, 10), зберігаючи його розмір таким же, що і був — 10 на 10 пікселів (тому що ми не змінюємо аргументи width та height).

Виходячи з того, що кожне коло циклу збільшує і на 1, х та у координати продовжуватимуть зростати на 10 пікселів кожного разу, коли цикл проходитиме одне коло, але розміри квадрата — ширина і висота — залишатимуться незмінними — 10 пікселів. Тих шість квадратів, що ще залишилося намалювати, будуть намальовані в ході перебігу шести наступних кіл циклу.

За замовчуванням, коли ви викликаєте метод fillRect, JavaScript намалює чорний прямокутник. Але ви можете зафарбувати його іншим кольором, змінивши властивість рисувального контексту fillStyle. Задаючи властивості fillStyle новий колір, все, що ви малюватимете, буде забарвлено цим кольором доки ви знову не внесете зміни до fillStyle. Найлегший спосіб зміни кольору властивості fillStyle - це надати їй назву бажаного кольору у вигляді рядка. Наприклад:

ctx.fillStyle = "Red";
ctx.fillRect(0, 0, 100, 150);

На строці з ctx.fillStyle ми кажемо рисувальному контексту, що все, що ми малюватимемо, починаючи з цієї секунди, повинно бути червоним. Запущений код повинен намалювати на екрані яскравий червоний прямокутник. Тепер розглянемо метод, який допоможе нам створити квадрати різного кольору в рядок:

function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
for (var i= 0; i < 10; i++) {
ctx.fillStyle = getRandomColor();
ctx.fillRect(i * 10, 0, 10, 10);
}

Уяви, що ти хочеш, щоб кожен квадрат мав свій колір, і ти не хочеш самостійно вибирати кожен колір, а хочеш, щоб комп'ютер вибирав його випадково.

Math.random() — це як «кільце фортуни», яке дає випадкове число від 0 до 1. Наприклад, може бути 0.2 або 0.7, але не 1.

Math.floor() — ця функція "обрубує" число до цілої частини. Тобто, якщо у нас було число 0.8, то воно стане 0, а якщо 2.9 — стане 2.

Тепер, ми хочемо отримати випадкові значення для кольору:
r — це червоний колір (від 0 до 255).
g — зелений (від 0 до 255).
b — синій (від 0 до 255).

Всі ці числа ми використовуємо для створення кольору. Наприклад, rgb(255, 0, 0) — це червоний колір, а rgb(0, 255, 0) — це зелений.

ctx.fillStyle = getRandomColor(); — це як малювання нового кольору для кожного квадрата. Кожен раз, коли ми малюємо квадрат, ми даємо йому випадковий колір, який вибрав комп'ютер за допомогою функції getRandomColor().