Тема: Використання полотна в

HTML 5
 Питання, що розглядаються:

1. Основи використання полотна

2. Основні лінії і штрихи

3. Вставка зображень та оформлення

тексту

Company Logo
 Цілі і завдання вивчення теми:
1) Ознайомитися з можливостями
застосування та особливостями
використання полотна в HTML5.

Company Logo
 Специфікація HTML 5
Специфікація HTML5 включає безліч нових властивостей, одним з
яких є елемент canvas. Полотно (canvas) HTML5 надає простий і
потужний спосіб створення графічних зображень за допомогою
JavaScript. Для кожного елемента canvas можна використовувати
"контекст" (уявіть сторінку в альбомі для малювання), в якому можна
виконувати команди JavaScript для малювання. Браузери можуть
реалізувати декілька контекстів полотен і різні API надають функції для
малювання.
Більшість основних браузерів включають можливості контексту
полотна 2D - Opera, Firefox, Konqueror і Safari. Крім того існують
експериментальні збірки браузера Opera, які включають підтримку
контексту полотна 3D, і розширення, яке забезпечує підтримку полотна
3D в Firefox.

Company Logo
 1. Основи використання полотна
Створення контексту полотна на сторінці складається просто в
додаванні елемента <canvas> в документ HTML наступним чином:

<canvas id="myCanvas" width="300" height="150">

Резервний контент на випадок відсутності підтримки
полотна в браузері.
</ Canvas>

Необхідно визначити ID елемента, щоб можна було знайти елемент

пізніше в коді JavaScript, і потрібно також визначити ширину і висоту
полотна.
Щоб малювати на полотні, потрібно використовувати JavaScript.
Спочатку знаходимо елемент полотна за допомогою getElementById,
потім ініціалізуємо необхідний контекст. Після цього можна починати
малювати на полотні за допомогою доступних в API контексту команд.

Company Logo
 1. Основи використання полотна
Наступний сценарій малює простий прямокутник на певному
полотні:

/ / Отримуємо посилання на елемент.

var elem = document.getElementById ('myCanvas');
/ / Завжди перевіряйте властивості і методи,
/ / Щоб переконатися, що код буде працювати
/ / В інших браузерах.
if (elem && elem.getContext) {
/ / Отримуємо контекст 2d.
/ / Пам'ятайте: можна ініціалізувати тільки
/ / Один контекст для елемента.
var context = elem.getContext ('2 d ');
if (context) {
/ / Все зроблено. Тепер можна намалювати прямокутник.
/ / Необхідно тільки поставити координати
/ / Точки прив'язки (x, y),
/ / За якими слідують ширина і висота
/ / Прямокутника.
context.fillRect (0, 0, 150, 100); } }
Company Logo
 2. Основні лінії і штрихи
За допомогою властивостей fillStyle і strokeStyle можна визначити
кольори, що використовуються для зображення заповнених фігур і
штрихів. Значення кольорів, які можна використовувати, такі ж як і в
CSS: шістнадцяткові коди, rgb (), rgba () і навіть hsla (), якщо браузер
підтримує це (наприклад, це властивість підтримується в Opera 10.00 і
пізніших версіях).

За допомогою fillRect можна малювати заповнені прямокутники. За

допомогою strokeRect можна малювати прямокутники без заповнення.
Якщо ви хочете очистити деяку частину полотна, можна
використовувати clearRect. Ці три методи використовують однакові
аргументи: x, y, width, height. Два перших аргументу повідомляють
координати (x, y), а два останніх аргументу задають ширину і висоту
прямокутника.
Щоб змінити товщину ліній, можна використовувати властивість
lineWidth.

Company Logo
 2. Основні лінії і штрихи
Приклад, який використовує fillRect, strokeRect, clearRect та інші
можливості:

context.fillStyle = '# 00f'; / / синій

context.strokeStyle = '# f00'; / / червоний
context.lineWidth = 4;
/ / Малюємо кілька прямокутників.
context.fillRect (0, 0, 150, 50);
context.strokeRect (0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect (30, 25, 90, 60);

Створення спеціальної фігури виконується легко – щоб почати

малювати шлях, використовуйте beginPath (), потім накресліть шлях,
який формує фігуру за допомогою прямих ліній, кривих та інших
примітивів. Коли закінчите, викличте fill і stroke, якщо хочете заповнити
фігуру або намалювати штрихи, потім викличте closePath (), щоб
закінчити малювання фігури.

Company Logo
 2. Основні лінії і штрихи
Наступний приклад показує малювання трикутника:

/ / Задаємо властивості стилю оформлення.

context.fillStyle = '# 00f';
context.strokeStyle = '# f00';
context.lineWidth = 4;
context.beginPath ();
/ / Починаємо з верхньої лівої точки.
context.moveTo (10, 10); / / задаємо координати (x, y)
context.lineTo (100, 10);
context.lineTo (10, 100);
context.lineTo (10, 10);
/ / Готово! Тепер заповніть фігуру, і накресліть штрихи.
/ / Фігура буде невидимою,поки не буде викликано один з трьох методів
context.fill ();
context.stroke ();
context.closePath ();

Company Logo
 3. Вставка зображень та оформлення
тексту
Метод drawImage дозволяє вставляти інші зображення (елементи
img і canvas) в контекст полотна. У браузері Opera можна також
малювати зображення SVG всередині полотна. Це досить складний
метод, який отримує три, п'ять або дев'ять аргументів:

Три аргументи: Базовий варіант drawImage використовує один

аргумент для вказівки на включення зображення, і два для визначення
координат місця призначення всередині контексту полотна.
П'ять аргументів: Другий варіант використання drawImage включає
наведені вище три аргументи, плюс два для визначення ширини і
висоти вставляється зображення (якщо ви захочете змінити його
розмір).
Дев'ять аргументів: Самий розвинений варіант використання
drawImage включає окрім п'яти аргументів два значення для координат
всередині вихідного зображення, і два значення для ширини і висоти
всередині вихідного зображення. Ці значення дозволяють динамічно
обрізати вихідне зображення перед вставкою в контекст полотна.

Company Logo
 3. Вставка зображень та оформлення
тексту
Приклад коду показує всі три типи drawImage в дії:

/ / Три аргументи: елемент, координати місця призначення (x, y).

context.drawImage (img_elem, dx, dy);
/ / П'ять аргументів: елемент, координати місця призначення (x, y)
/ / І ширина і висота місця призначення (якщо ви хочете змінити
/ / розмір початкового зображення).
context.drawImage (img_elem, dx, dy, dw, dh);
/ / Дев'ять аргументів: координати місця призначення (x, y),
/ / Ширина і висота джерела (для обрізки),
/ / Координати місця призначення (x, y),
/ / Ширина і висота місця призначення (зміна розміру).
context.drawImage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

Company Logo
 3. Вставка зображень та оформлення
тексту
API контексту 2D надає три методи, які допомагають малювати з
точністю до пікселя: createImageData, getImageData, і putImageData.

Пікселі зберігаються в об'єктах типу ImageData. Кожен об'єкт має три

властивості: width, height і data. Властивість data має тип
CanvasPixelArray, що має кількість елементів рівне width * height * 4; це
означає, що для кожного пікселя визначаються значення червоного,
зеленого, синього кольорів і alpha, в тому порядку, в якому вони
повинні з'явитися (всі значення знаходяться в діапазоні від 0 до 255,
включаючи alpha!).

Company Logo
 3. Вставка зображень та оформлення
тексту
Приклад, який малює блок червоних крапок:

/ / Створюємо об'єкт ImageData

var imgd = context.createImageData (50,50);
var pix = imgd.data;
/ / Цикл по всіх пікселям і задання прозорого червоного кольору
for (var i = 0; n = pix.length, i <n; i + = 4) {
pix [i] = 255; / / канал red (червоний)
pix [i +3] = 127; / / канал alpha }
/ / Відображення об'єкта ImageData в заданих координатах (x, y).
context.putImageData (imgd, 0,0);
/ / Примітка: не всі браузери реалізують createImageData. В таких
браузерах використовують getImageData.

Company Logo
 3. Вставка зображень та оформлення
тексту
За допомогою можливостей ImageData можна робити значно більше,
ніж тільки це. Наприклад, можна виконати фільтрацію зображення, або
можна зробити математичну візуалізацію (уявіть фрактали або щось
ще).
Наступний код показує, як створити простий фільтр для інверсії
кольору:

/ / Отримуємо CanvasPixelArray із заданих координат

/ / І розмірів.
var imgd = context.getImageData (x, y, width, height);
var pix = imgd.data;
/ / Цикл по всіх пікселям для інверсії кольору.
for (var i = 0, n = pix.length; i <n; i + = 4) {
pix [i] = 255 - pix [i]; / / red
pix [i +1] = 255 - pix [i +1]; / / green
pix [i +2] = 255 - pix [i +2]; / / blue
/ / I +3 буде alpha (четвертий елемент)
}
/ / Виводимо ImageData в заданих координатах (x, y).
context.putImageData (imgd, x, y);
Company Logo
 Властивості тексту об'єкта context:
context
font: Визначає шрифт тексту, таким же чином як властивість CSS
font-family)
textAlign: Визначає горизонтальне вирівнювання тексту. Значення:
start, end, left, right, center. Значення за замовчуванням: start.
textBaseline: Визначає вертикальне вирівнювання тексту. Значення:
top, hanging, middle, alphabetic, ideographic, bottom. Значення за
замовчуванням: alphabetic.

Для відображення тексту є два методи: fillText і strokeText.

Перший з них зображує форму тексту, заповнену за допомогою
поточного стилю fillStyle, в той час як другий зображує контур/межу
тексту використовуючи поточний стиль strokeStyle. Обидва отримують
три аргументи: текст для висновку, і координати (x, y), що визначають
місце відображення. Існує також необов'язковий четвертий аргумент -
максимальна ширина. Це призводить до того, що браузер, якщо
знадобиться, стискає текст, щоб розмістити його всередині заданої
ширини.
Властивості вирівнювання тексту впливають на положення тексту
щодо координат (x, y), заданих в методах відображення.

Company Logo
 Властивості тексту об'єкта context:
Прикладом створення на полотні простого тексту "hello world":

context.fillStyle = '# 00f';

context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText ('Hello world!', 0, 50);

Company Logo
 Властивості API тіней:
shadowColor: задає бажаний колір тіні. Допустимі значення такі ж як і
значення кольору в CSS.
shadowBlur: визначає величину розмитості на тіні в пікселях. Чим
менше значення розмитості, тим більш різкою буде тінь. Створює
ефект дуже схожий на розмитість по Гауссу в Photoshop.
shadowOffsetX і shadowOffsetY: визначає зсув тіні по x і y в пікселях.

Приклад коду тіні полотна:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba (255, 0, 0, 0.5)';
context.fillStyle = '# 00f';
context.fillRect (20, 20, 150, 100);

Company Logo
 Властивості градієнтів:
Властивості fillStyle і strokeStyle можуть також мати присвоєні їм
об'єкти CanvasGradient замість рядків кольору CSS – це дозволяє
використовувати колірні градієнти для фарбування ліній і заповнень
замість однорідних кольорів.

Для створення об'єктів CanvasGradient можна використовувати два

методи: createLinearGradient і createRadialGradient. Перший з них
створює лінійний градієнт - лінії кольору всі йдуть в одному напрямку -
в той час як другий створює радіальний градієнт - колірні кола, що
розходяться з однієї точки.

Company Logo
 Властивості градієнтів:
Наступний код показує, як використовувати градієнти:

/ / Необхідно надати для градієнта

/ / Координати (x, y) джерела і місця призначення
/ / (Звідки він починається і де закінчується).
var gradient1 = context.createLinearGradient (sx, sy, dx, dy);
/ / Тепер додамо в градієнт кольору.
/ / Перший аргумент задає позицію кольору в градієнті.
/ / Діапазон допустимих значень від 0 (початок градієнта)
/ / До 1 (кінець градієнта).
/ / Другий аргумент повідомляє необхідний колір,
/ / Використовуючи формат кольору CSS.
gradient1.addColorStop (0, '# f00'); / / червоний
gradient1.addColorStop (0.5, '# ff0'); / / жовтий
gradient1.addColorStop (1, '# 00f'); / / синій
/ / Для радіального градієнта також потрібно задати
/ / Джерело і радіус кола призначення.
/ / Координати (x, y) визначають центр окружності
/ / (Початок та кола призначення).
var gradient2 = context.createRadialGradient (sx, sy, sr, dx, dy, dr);
Company Logo