HTML Canvas - це потужний інструмент, яким можна створювати різні графічні елементи на веб-сторінці. Один з базових елементів, який можна малювати на полотні Canvas – це Лінія. Лінії використовуються для створення контурів фігур, перекриття кордонів та декоративних ефектів.
Для того щоб намалювати лінію в HTML Canvas, потрібно використовувати деякі властивості і методи JavaScript. Спершу необхідно отримати доступ до елемента Canvas на веб-сторінці, а потім використовувати методи контексту малювання для створення ліній різної довжини і товщини.
CanvasRenderingContext2D - це об'єкт, який представляє контекст малювання для полотна Canvas. З його допомогою можна налаштовувати всі властивості лінії, такі як колір, товщина і стиль. Потім можна використовувати контекстні методи, такі як beginPath(), moveTo() і lineTo(), щоб визначити початкову та кінцеву точки лінії, а потім намалювати її методом stroke().
Методи малювання ліній
У HTML Canvas існують різні методи малювання ліній. Ось деякі з них:
- stroke() : метод stroke() використовується для відображення лінії, яка була намальована точками за допомогою методу moveTo () і lineTo (). Після використання методу stroke (), лінія буде намальована на полотні.
- lineTo (): метод lineTo () використовується для визначення точки закінчення лінії. Він приймає два аргументи-координати X і y точки закінчення.
- moveTo (): метод moveTo () використовується для переміщення поточної точки на полотні без малювання лінії. Він приймає два аргументи-координати X і y нової точки.
- lineWidth: властивість lineWidth визначає товщину лінії, яка буде намальована на полотні. Значення має бути позитивним числом. За замовчуванням значення дорівнює 1.
- lineCap : властивість lineCap визначає стиль кінців лінії. Є три можливі значення: butt (за замовчуванням - просто прямий кінець), round (закруглений кінець) і square (квадратний кінець).
Це лише деякі з методів і властивостей, які можна використовувати при малюванні ліній в HTML Canvas. Використовуючи їх комбінації, ви можете створювати різноманітні форми і фігури на вашому полотні.
Пряма лінія
У HTML Canvas можна намалювати пряму лінію за допомогою методу lineTo(). Цей метод дозволяє визначити кінцеві координати лінії на полотні.
Перш ніж почати малювати, потрібно спочатку визначити контекст полотна за допомогою методу getContext(). Потім можна викликати метод beginPath(), щоб почати новий шлях.
Після цього можна задати початкові координати лінії за допомогою методу moveTo(). Потім, використовуючи метод lineTo(), можна визначити кінцеві координати.
Наприклад, щоб намалювати просту горизонтальну лінію, можна використовувати наступний код:
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 50); ctx.lineTo(200, 50); ctx.stroke();
У цьому прикладі, початкові координати лінії встановлені на (0, 50), а кінцеві координати - на (200, 50). Метод stroke() використовується для відображення лінії на полотні.
Також можна змінювати колір і товщину лінії за допомогою властивостей strokeStyle і lineWidth. Наприклад, для установки червоного кольору і товщини 2 пікселя, можна використовувати наступний код:
ctx.strokeStyle = 'red'; ctx.lineWidth = 2;
Це дозволить відобразити червону лінію товщиною 2 пікселя.
Таким чином, за допомогою методу lineTo() і властивостей strokeStyle і lineWidth можна легко малювати прямі лінії на полотні HTML Canvas.
Крива лінія
HTML Canvas дозволяє малювати не тільки прямі лінії, але також і криві. Для цього використовується метод quadraticCurveTo() або bezierCurveTo() .
Метод quadraticCurveTo () використовується для малювання параболічних кривих. Він приймає три аргументи: контрольну точку по осі X, контрольну точку по осі Y і кінцеву точку. Приклад використання:
- context.quadraticCurveTo(200, 100, 400, 200);
Метод bezierCurveTo () використовується для малювання кубічних кривих. Він приймає шість аргументів: дві контрольні точки по осі X і Y і кінцеву точку. Приклад використання:
- context.bezierCurveTo(200, 100, 300, 200, 400, 100);
Обидва методи виконуються після виклику методу beginPath() і перед викликом методу stroke () або fill ().
Криві лінії додають гнучкість і оригінальність в Малюнки на HTML Canvas. Це дозволяє створити плавні і витончені криві, які можуть бути використані для створення візуальних ефектів або складних форм.
Відрізки з плавними переходами
HTML Canvas надає різні можливості для створення графічних елементів, включаючи малювання ліній. Однак, іноді потрібно створити відрізок з плавними переходами кольору або товщини. У цьому розділі ми розглянемо, як це можна зробити.
Для створення відрізка з плавними переходами ми можемо скористатися функцією createLinearGradient(). Ця функція створює градієнт, який можна використовувати для заповнення графічних об'єктів, включаючи лінії.
Приклад коду нижче демонструє, як створити відрізок з плавними переходами:
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, 'red');gradient.addColorStop(0.5, 'yellow');gradient.addColorStop(1, 'green');ctx.strokeStyle = gradient;ctx.lineWidth = 10;ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(250, 50);ctx.stroke();У наведеному вище прикладі ми створюємо горизонтальний градієнт, який починається з червоного кольору, потім плавно переходить в жовтий і зелений. Потім ми застосовуємо цей градієнт як колір обведення нашої лінії.
Ви також можете створити вертикальний градієнт, змінюючи значення параметрів createLinearGradient(). Все, що вам потрібно зробити, це змінити значення початкових і кінцевих координат градієнта.
Таким чином, створення відрізків з плавними переходами кольору або товщини в HTML Canvas може бути досягнуто за допомогою функції createLinearGradient(). Використовуйте цей метод, щоб додати краси та інтересу до ваших графічних проектів.
Пунктирна лінія
Для малювання пунктирних ліній в HTML Canvas можна використовувати комбінацію відрізків ліній і пропусків. Це можна зробити, використовуючи властивості контексту малювання lineDash і lineDashOffset.
Спочатку потрібно задати масив значень lineDash, який буде визначати довжину відрізків і пропусків. Наприклад, для створення пунктирною лінії з довгими відрізками і короткими пропусками можна використовувати наступний масив: [10, 5] . Перший елемент масиву визначає довжину відрізка, а другий-пропуску.
Потім потрібно задати значення lineDashOffset, яке визначає зміщення початку пунктирною лінії. Наприклад, якщо ви хочете почати пунктирну лінію з пропуску, а не з відрізка, ви можете встановити значення lineDashOffset рівним довжині пропуску.
const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');ctx.lineWidth = 3;ctx.strokeStyle = 'black';ctx.setLineDash([10, 5]); // задаем массив значений lineDashctx.lineDashOffset = 5; // задаем значение lineDashOffsetctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(250, 50);ctx.stroke();У цьому прикладі ми створюємо пунктирну лінію з довгими відрізками довжиною 10 пікселів і короткими пропусками довжиною 5 пікселів. Початок пунктирної лінії зміщено на 5 пікселів.
Таким чином, використовуючи властивості lineDash і lineDashOffset, можна легко створювати пунктирні лінії в HTML Canvas.