Лекція 6
Програмована графіка
План
Поняття про канву та малювання найпростіших фігур.
Малювання складних контурів.
Керування кольором та додаткові можливості графіки.
1. Мова HTML5 дозволяє програмно малювати довільні графічні об’єкти, навіть досить складні та організовувати виведення тексту, підтримку зовнішніх графічних об’єктів тощо.
Все малювання виконується в особливому елементі Web-сторінки – канві. В інших елементах програмне малювання не працює. Канву створюють за допомогою парного тегу <CANVAS>
<CANVAS ID=<"ім’я"> [WIDTH="<ширина>"] [HEIGHT='''<висота>']> </CANVAS>
Малювання виконується в сценарії програмно. Доступ до канви здійснюється за іменем, заданим атрибутом ID. Задавати висоту та ширину канви стилями CSS не рекомендується. Канва є екземпляром об’єкта браузера ва HTMLCanvasElement, похідного від HTMLElement.
Малювання виконується за допомогою особливих властивостей та методів об’єкта CanvasRenderingContext2D. Його можна розглядати як набір інструментів, що використовуються для малювання на канві.
Щоб викликати канву використовуємо метод getContext об’єкта HTMLCanvasElement:
<канва>.getContext("2d")
Цей метод має єдиний параметр – стрічку "2d" і повертає екземпляр об’єкту CanvasRenderingContext2D.
Створимо канву та контекст малювання:
var htelCanvas = Ext.getDom("cnv");
var ctxCanvas = htelCanvas.getContext ("2d");
Малювання прямокутників та очищення області:
Для малювання прямокутника без заливки (контура) призначено метод strokeRect:
ctxCanvas.strokeRect (20,20,360,260);
Перші два параметри задають координати лівого верхнього кута прямокутника, інші два параметри – відповідно висоту та ширину прямокутника (у пікселах чи числах).
Аналогічно будується і замальований прямокутник методом fillRect:
ctxCanvas.fillRect (20,20,360,260);
Метод clearRect очищає задану прямокутну область із аналогічним форматом виклику:
ctxCanvas.clearRect (20,20,360,260);
Робота з лініями:
Для задання кольору ліній використовуємо метод strokeStyle. Колір можна задати назвою, у форматі #RRGGBB або в інших двох форматах:
rgb (<червона складова>, <зелена складова>, <синя складова>)
rgba (<червона складова>, <зелена складова>, <синя складова>,<рівень прозорості>)
Тут складові кольорів можуть набувати значення від 0 до 255, а рівень прозорості від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).
Властивість fillStyle визначає колір заливки. За замовчуванням колір ліній та заливки чорний.
Властивість lineWidth задає товщину ліній в пікселах числом:
ctxCanvas.lineWidth = 20;
Властивість globalAlpha задає рівень прозорості для всієї графіки, яка пізніше буде намальована.
2. Контури складних фігур малюються в три етапи:
- браузер повідомляється про те, що буде розпочато малювання складної фігури;
- малюються окремі лінії, що складатимуть складний контур;
- браузер ставиться до відома, що малювання закінчено і малюнок можна вивести на канву, можливо разом із заливкою; також можна вказати браузеру, що намальований контур слід замкнути.
Малювання складного контура починається з виклику методу beginPath, який не має параметрів та не повертає результатів і закінчується викликом методу closePath. Після його виклику остання точка малювання буде з’єднана з найпершою.
Завершується малювання викликом одного із методів stroke чи fill. Перший просто завершує малювання контура, другий – замикає його, якщо він не замкнутий і заливає фігуру, що утворилася. Обидва методи не мають параметрів та не повертають результатів.
Розглянемо методи малювання. Для цього використовується концепція пера – інструмент можна переміщати в будь яку точку на канві. Спочатку роботи перо знаходиться в точці з координатами (0, 0) – у верхньому лівому куті канви.
Для переміщення в конкретну точку використовуємо метод moveTo:
ctxCanvas.moveTo (200, 150);
Для малювання прямої лінії використовують метод lineTo. Початкова точка знаходиться там, де поміщене перо, а параметрами методу є координати точки, до якої потрібно провести лінію.
ctxCanvas.lineTo (200, 150);
Для малювання дуг використовують метод arc. Перші два параметри задають горизонтальну та вертикальну координату центра дуги. Третій визначає радіус дуги, четвертий та п’ятий параметр задають початковий та кінцевий кути в радіанах (кути відраховують від горизонтальної осі). Останній параметр логічне значення, якщо воно true, то малювання здійснюється проти годинникової стрілки, якщо false, то – за.
ctxCanvas.arc (200, 150, 100, 0, Math.PI/2, false);
Можна малювати прямокутники, як частину складної фігури за допомогою методу rect з параметрами аналогічними тим, що використовувалися в методах малювання прямокутників, як незалежних фігур.
Канва дозволяє задати стиль ліній.
Властивість lineCap задає форму початкових та кінцевих точок ліній і може набувати наступних значень:
"butt" – початкова та кінцева точка відсутні (за замовчуванням);
"round" – початкова та кінцева точка у вигляді кружечків;
"square" – початкова та кінцева точка у вигляді квадратиків.
ctxCanvas.lineCap = "round";
Властивість lineJoin задає форму точок з’єднання ліній одна з одною:
"miter" – точки з’єднання мають вигляд гострого чи тупого кута;
"round" – точки з’єднання, що утворюють гострі кути заокруглюються;
"bevel" – гострі кути, що утворюються з’єднувальними лініями, зрізаються.
ctxCanvas.lineJoin = "bevel";
Властивість miterLimit задає дистанцію, на яку можуть виступати гострі кути, утворені з’єднанням ліній від точки з’єднання. Кути, що виступають на більшу дистанцію будуть зрізані. Значення задається числом.
Виведення тексту відбувається методом strokeText – у вигляді контура, без заливки. Першим параметром є стрічка, яку треба вивести, другий та третій – координати точки початку виведення. Четвертий, необов’язковий параметр визначає максимальну ширину тексту, що виводиться.
ctxCanvas.strokeText ("Ура!!!!", 150, 200);
Метод fillText виводить текст але лише заливкою, без контура. Формат виводу аналогічний до формату виводу методу strokeText.
Властивість font дозволяє задати параметри шрифта, яким буде виводитися текст. Параметри шрифта вказують в тому ж форматі, що і значення атрибута стиля font:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font ="italic 12 pt Verdana";
ctxCanvas.fillText ("Ура!!!!", 150, 200);
Властивість textAlign дозволяє задати горизонтальне вирівнювання тексту відносно точки, в яку він буде виведений.
Властивість textBaseline дозволяє задати вертикальне вирівнювання тексту відносно точки, в яку він буде виведений.