Малюємо лінії, квадрат і коло за допомогою canvas

Сьогодні ближче познайомимося з графікою яка застосовується в Canvas. Навчимося малювати прості лінії, багатокутник, квадрат і коло.

Робоча область Canvas буде використовуватися з попередньої статті. Якщо ви не знайомі з цією технологією, раджу почати вивчення з ініціалізації Canvas.

Почнемо з малювання ліній. Лінії в Canvas отрісовиваємих за допомогою функції stroke. координати лінії задаються за допомогою lineTo.

Для початку намалюємо лінію перетинає по горизонталі нашу робочу область.

Кому не зрозумілий окремий код - Після статті ви можете завантажити приклад з повним кодом для перевірки роботи на своєму комп'ютері.

Параметри задані в ctx.moveTo визначають стартову точку, від якої ми і будемо малювати (0, h / 2 - Початок середини правого краю з ліво).

Для того щоб намалювати багатокутник лініями потрібно додати всього пару рядків:

Замикає лінії завжди виходить з координатами початкової точки.

Має вийти наступне.

Сподіваюся з лініями розібралися, тепер подивимося як намалювати квадрат в Canvas.

За відображення квадрата відповідає функція fillRect

Коло в Canvas малюється таким способом.

Функція arc приймає на себе цілих 6 параметрів. (Перші 2 параметра визначають початок малювання дуги, радіус, початковий кут, поворот двох дуг, отрисовка за годинниковою або проти годинникової стрілки.)