Тема 19 Малюємо на полотні (Арки та кола)

Малюємо на полотні (Арки та кола)

Малюємо на полотні

На додачу до можливості малювати на полотні прямі лінії та прямокутники, ми можемо скористатися методом агс, щоб малювати арки та кола. Щоб намалювати коло, ви задаєте координати його центра та радіус (відстань між центром кола та зовнішнім краєм) та кажете JavaScript, яку частку кола намалювати, надаючи їй початковий та кінцевий градуси як аргументи. Можете намалювати і повне коло або ж якусь його частинку —арку. Кінцевий та початковий кути вимірюються радіанами. Вимі-рюючись у радіанах, повне коло починається з 0 (з правої сторони кола) і здіймається вгору до π х 2 радіани. Себто, щоб намалювати ціле коло, ви кажете методу arc малювати від точки у 0 радіанів до точки у π х 2 радіанів.

Малюємо чверть кола

ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI/2, false);
ctx.stroke();

Малюємо півколо

ctx.lineWidth = 3;
ctx.strokeStyle = "Green";
ctx.beginPath();
ctx.arc(250, 100, 50, 0, Math.PI, false);
ctx.stroke();

Малюємо ¾ кола

ctx.lineWidth = 3;
ctx.strokeStyle = "Orange";
ctx.beginPath();
ctx.arc(400, 100, 50, 0, Math.PI*3/2, false);
ctx.stroke();

Малюємо коло

ctx.lineWidth = 3;
ctx.strokeStyle = "Black";
ctx.beginPath();
ctx.arc(550, 100, 50, 0, Math.PI*2, false);
ctx.stroke();

Малюємо багато кіл за допомогою функції

Якщо окрім кіл вам більше нічого малювати не треба, то метод arc надто складний. Для кіл значно кращим варіантом буде розпочати арку із точки 0 та завершити її у точці π х 2, а напрям руху лінії (за чи проти годинникової стрілки true/false) не повинен мати значення. Щоб намалювати коло методом агс, спочатку потрібно викликати ctx.beginPath та ctx.stroke. Ми можемо створити функцію, яка б малювала кола і яка дозволить нам не звертати уваги на всі ці деталі, себто нам треба буде задати лише аргументи х, у та radius. Зробімо це просто зараз.

var circle = function (x, y, radius){
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, false);
ctx.stroke();
};
circle(100,100,50);

Які при роботі з методом агс, у межах цієї функції перше що нам необхідно зробити, - це викликати ctx.beginPath, щоб сказати полотну, що ми хочемо намалювати контур. Далі ми викликаємо метод ctx.arc, передаючи йому змінні параметри х, у та radius із аргументів функціїі. Як і раніше ми використовуємо 0 для початкового кута, Math.PI * 2 для кінцевого кута та false, щоб намалювати коло за годинниковою стрілкою. Тепер, коли у нас вже є готова функція, ми можемо малю-вати багато кіл, просто вносячи координати їхніх центрів та радіусів як аргументи. Наприклад, цей код намалює декілька різнокольорових концентричних кіл:

ctx.lineWidth = 4;
ctx.strokeStyle = "Red";
circle(100, 100, 10);
ctx.strokeStyle = "Orange";
circle(100, 100, 20);
ctx.strokeStyle = "yellow";
circle(100, 100, 30);
ctx.strokeStyle = "Green";
circle(100, 100, 40);
ctx.strokeStyle = "Blue";
circle(100, 100, 50);
ctx.strokeStyle = "Purple";
circle(100, 100, 60);

Спершу ми задаємо ширину лінії — 4 пікселі. Далі виставляємо strokeStyle на "Red" та використовуємо функцію circle, щоб намалювати коло із центром на координатах (0, 0, 100) та із радіусом у 10 пікселів. Це центральне червоне коло. Далі ми застосовуємо той же прийом, щоб намалювати помаранчеве коло на тих же координатах, але із радіусом у 20 пікселів, те саме робимо і при створенні жовтого кола (локація центра кола незмінна, але радіус уже — 30 пікселів). Три останніх кола зелене, синє та лілове, мають ту саму локацію центра, але їхні радіуси поступово збільшуються.

build info

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