Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів

Атрибут id не є специфічний для елемента <canvas>, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента -- гарна ідея, тому що це значно спрощує ідентифікацію його в нашому скрипті.

Стиль елемента <canvas> може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в canvas. Якщо ніякі налаштування стилю не задані, canvas буде створений повністю прозорим.

Аварійний стан

У зв'язку з тим, що елемент <canvas> відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.

Це дуже просто: ми всього-лише надаємо альтернативний вміст всередині елемента canvas. Браузери, які не підтримують <canvas>, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують <canvas>, проігнорують вміст контейнера і нормально оброблять canvas.

Приміром, ми можемо видати текстовий опис вмісту canvas, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:

<canvas id="photo" width="150" height="150">

Використовуйте сучасніший браузер!

</canvas>

Або

<canvas id="photo" width="150" height="150">

<img src="images/photo.jpg" width="150" height="150/>

</canvas>

<canvas> створює поверхню для малювання, яка надає один або більше контекстів для відтворення, який використовується для створення відображуваного контенту і маніпуляцій з ним. Ми сфокусуємо на 2D (двомірному) контексті відтворення, який в наш час є єдиним певним контекстом. У майбутньому інші контексти зможуть підтримувати інші види відтворення: наприклад, цілком ймовірно, що буде додано 3D контекст, заснований на OpenGL ES.

<canvas> спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент canvas має DOM-метод, званий getContext, і призначений для отримання контексту відтворення разом з його функціями малювання. getContext () приймає один параметр -- тип контексту

var canvas = document.getElementById ('tutorial');

var ctx = canvas.getContext ('2 d ');

Першим рядком ми отримуємо DOM-вузол нашого canvas, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.

У HTML5 визначений елемент <canvas> як «растрове полотно, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту». Полотно це прямокутна область на вашій сторінці, де за допомогою JavaScript можна малювати що побажаєте.

Як же це полотно виглядає? Насправді, ніяк. У тега <canvas> немає власного контенту та рамки.

Код виглядає так.

<canvas width="150" height="300"> </ canvas>

height - Задає висоту полотна. За замовчуванням 300 пікселів.

width - Задає ширину полотна. За замовчуванням 150 пікселів.

Давайте додамо пунктирну рамку, щоб побачити, з чим ми маємо справу.

У вас може бути декілька елементів <canvas> на одній сторінці. Кожене полотно буде відображатися в DOM і зберігати свій власний стан. Якщо ви додасте кожному полотну атрибут id, то можете отримати до них доступ, як і до будь-якого іншого елементу.

Розширимо наш код, включивши атрибут id.

<canvas id="a" width="300" height="225"> </ canvas>

Тепер легко можна виявити елемент <canvas> в DOM.

var a_canvas = document.getElementById ("a");

Подія onclick викликає цю функцію:

function draw_b () {

var b_canvas = document.getElementById ("b");

var b_context = b_canvas.getContext ("2d");

b_context.fillRect (50, 25, 150, 100);

}

Перший рядок функції не робить нічого особливого, вона просто знаходить елемент <canvas> в DOM.

function draw_b () {

var b_canvas = document.getElementById ("b");

var b_context = b_canvas.getContext ("2d");

b_context.fillRect (50, 25, 150, 100);

}

Кожне полотно має контекст малювання. Як тільки ви знайшли елемент <canvas> в DOM (за допомогою document.getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок "2D" в методі getContext ().

Отже, у вас є елемент <canvas> і є контекст малювання, де визначені методи і властивості малювання. Мається ціла група властивостей і методів присвячених малювання прямокутників.

Властивість fillStyle може бути кольором, малюнком або градієнтом (докладніше про градієнтах трохи нижче). За замовчуванням fillStyle заливає суцільним чорним кольором, але ви можете встановити будь-що. Кожен контекст малюнка пам'ятає свої власні властивості при відкритті сторінки, поки ви її не поновіть.

fillRect ( x, y, width, height ) малює прямокутник, заповнений поточним стилем заливки.

Властивість strokeStyle як і fillStyle може бути кольором, малюнком або градієнтом.

strokeRect ( x, y, width, height ) малює прямокутник з поточним стилем лінії. strokeRect не заливати всередині, він просто малює кордону.

clearRect ( x, y, width, height ) видаляє пікселі у вказаному прямокутнику.

HTML5 - безсумнівний тренд. Причому, не стільки нова специфікація з новими тегами, скільки гармонійне і могутнє поєднання HTML + CSS + JS, витончено втирає носа Flash.

Вже зараз можна спостерігати красиві HTML - 5 сайти без мегабайтів зображень і без сотень кілобайт скриптів. Canvas дозволяє малювати в спеціальному елементі документа <canvas> лінії, дуги, прямокутники, кола, заливати простір, маніпулювати текстом і картинками. Все це прекрасно описано в « Canvas Tutorial « Mozilla Developers Center з прикладами та рисунками.

Цей тег незвичайний тим, що не керує параметрами візуалізації тексту, як, наприклад, "це слово буде виділено курсивом ", а дає можливість намалювати на сторінці будь-яке зображення використовуючи команди javascript.

Фактично до появи canvas якщо вам було необхідно розмістити на сайті динамічне зображення, наприклад, графік відвідувань сайту по днях тижня. То ви або створювали php - скрипт ( благо, навіть на безкоштовних хостингах давно є підтримка бібліотеки gd2 графічних функцій, таких як лінія, прямокутник, еліпс та інші). Або ви створювали flash - ролик, який також за допомогою своїх функцій малював зображення.

В окремих випадках можливе було використовувати кошти java applet або activex. Чим погані три останні підходу: flash як і java applet вимагає встановленого плагіна (і в разі java applet дуже немаленького розміру), activex - працюють тільки під iexplorer і тільки під windows (не кажучи про те, що у багатьох користувачів ця дірява і, прямо скажімо, небезпечна технологія просто відключена). І ще, наприклад, у мене на роботі корпоративний proxy -сервер вирізає з сторінок flash - ролики, звичайно, це не показник, але все ж.

Підхід номер один, коли картинку генерує php код - універсальний, і надійний, правда споживає занадто багато надлишкової трафіку для деяких завдань. Наприклад, якщо ви створюєте додаток, який малює графік функції z = f ( x, y ), то більша частина отриманого зображення буде залита одним кольором фону і лише невелика частина картинки буде відображати лінії графіка функції. Для експерименту я створив картинку розміром 1024 * 768 з намальованою лінією синусоїди. Її розміри в різних форматах були такі: gif - 8 кб, jpeg - 33 кб, png - зашкалив за 210 кб. Останнє зауваження: наше додаток буде набагато зручніше, якщо користувач зможе отримувати графіки функцій без підключення до Інтернету, що у разі dial - up або погодинної оплати саме те.

Будемо вважати, що я вас переконав у корисності підходу з перенесенням генерації зображення з сервера на сторону клієнта, а тепер пару слів про історію та поточної ситуації з html canvas.

Тег canvas не входив ні в один зі стандартів, його придумала і реалізувала у своєму браузері safari компанія apple. Ідею підхопила група розробників mozilla і додала підтримку тега canvas в движок html -візуалізації gecko використовуваного в firefox і суміжних продуктах.

Потім інновацію підтримала компанія Opera Software, і, починаючи з 9-ої версії, браузер opera також знає тег canvas. Самі " активні" розробники самого " передового " браузера (я говорю про iexplorer ) в цей час як завжди спали. На щастя novell і google почали проекти з реалізації плагіна підтримує canvas для iexplorer - а. Додалася чи підтримка canvas в новомодному 7-ий iexplorer я не знаю, тому ніде згадок в internet про це я не знайшов, а спробувати не можу через небажання викачувати сей монструозний продукт. Слід зазначити, що даний тег планують внести в перспективний п'ятий стандарт html.

Найпростіший приклад використання canvas це просто вставити його в тіло html документа, не забувши про fallback. Простіше кажучи, якщо браузер клієнта не підтримує даний тег, то він повинен побачити деякий поясняющее повідомлення. У прикладі нижче це розміщене всередині тега canvas зображення. Дуже важливо дати canvas -у ідентифікатор для цього служить атрибут id, якщо ви так не зробите, то не зможете з javascript звертатися до canvas і малювати на ньому. В якості стильового оформлення я задав області canvas кордон чорного кольору, це тільки для зручності подальшої роботи.

<html> <head>

<script> <! - саме тут розміщуватимуться функції, які малюють на canvas ->

</ script >

</ head > <body>

<canvas id="canva" width="400" height="400" style="border: 1px solid black;">

<img src="no_canvas_sorry.jpg" />

</ canvas >

<button onclick="draw()"> draw ! </ button > <! - ця кнопка викликає деяку функцію малювання ->

</ body > </ html >

Наступний крок це створення функції, яка буде викликатися при натисканні на кнопку button. Функція повинна отримати доступ до об'єкта " canva ", для цього ми застосуємо стандартний метод getElementById ( "той самий ідентифікатор об'єкта, який ви, сподіваюся, не забули задати " ).

Потім слід перевірити, що браузер вміє малювати, слід попросити його для canvas повернути так званий контекст малювання (простіше кажучи, місце, де малюють ). І потім, озброївшись довідником функцій, можна починати безпосередньо малювати. Найпростіше це створити прямокутник, зафарбований деяким кольором, при цьому ви можете задати колір як звичний rgb, або ж rgba - буква a на кінці дає нам можливість задати alpha компоненту або прозорість.

Для того щоб намалювати прямокутник є три функції: fillRect, strokeRect, clearRect - які відповідно малюють прямокутник суцільним кольором, тільки кордон прямокутника, очищають частина області малювання. Всі ці функції отримують як параметр координати лівого верхнього кута прямокутника і його розміри.

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx = canvas.getContext ('2 d ');

/ / Попереджаючи наступне питання, немає, тривимірного контексту малювання немає,

/ / Малювати можна тільки на площині

ctx.fillStyle = " rgb ( 200,0,0 )";

ctx.fillRect ( 10, 10, 55, 50);

ctx.fillStyle = " rgba ( 0, 0, 200, 0.5 )";

ctx.fillRect ( 30, 30, 55, 50);

ctx.fillStyle = " rgb ( 0,0,0 )"; / / Чорний колір

ctx.fillRect ( 100,100,100,100 );

ctx.clearRect ( 125,125,60,60 );

ctx.strokeRect ( 150,150, 120,120 );

}

}

Якщо вам необхідно намалювати більш складну фігуру, то слід використовувати Path. Path - це просто шлях по якому водиться віртуальний олівець. Шлях повинен початися, олівець проводить кілька ліній ( дуг, кривих Безьє, прямокутників і т.д.), потім шлях закривається (цей крок необов'язковий, наприклад, ви самі довели лінію від останньої точки до першої). І останній крок - це запуск отрисовки або контуру Path, або її зафарбування, як варіант малюється і контур і фонова зафарбування одночасно.

Для того щоб намалювати лінію ви використовуєте дві базові функції moveTo ( x, y ), і lineTo (x, y). Перша з них піднімає невидимий олівець і переміщує його в точку ( x, y ), а другий переміщує олівець в точку ( x, y ) уже ведучи олівець по "листу".

Якщо вам хочеться намалювати коло, дугу, то використовуйте функцію arc ( x, y, radius, startAngle, endAngle, anticlockwise ), її параметри соотвественно координати центру кола або дуги, потім йде радіус, параметри startAngle і endAngle - задають початок і кінець дуги в радіанах (і це важливо), останнім йде параметр anticlockwise - логічний ознака того, чи буде дуга малюватися за годинниковою або проти годинникової стрілки. У прикладі нижче я малюю дві зірки, одна з яких відображається у вигляді контура, другий у вигляді заливки суцільним кольором, також малюється приклад дуги. Для того щоб задати колір контуру використовується властивість strokeStyle.

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx1 = canvas.getContext ('2 d ');

var ctx2 = canvas.getContext ('2 d ');

ctx1.beginPath ();

ctx2.beginPath ();

var deltaI = 0.1;

ctx1.moveTo ( 200 + 100 * Math.cos ( 0 ), 200 - 100 * Math.sin ( 0 ));

ctx2.moveTo ( 200 + 170 * Math.cos ( 0 ), 200 - 170 * Math.sin ( 0 ));

for ( var i = 0; i < 2 * Math.PI; i + = deltaI ) {

ctx1.lineTo ( 200 + 100 * Math.cos ( i ), 200 - 100 * Math.sin ( i ));

ctx1.lineTo ( 200 + 150 * Math.cos ( i + deltaI ), 200 - 150 * Math.sin ( i + deltaI ));

ctx2.lineTo ( 200 + 170 * Math.cos ( i ), 200 - 170 * Math.sin ( i ));

ctx2.lineTo ( 200 + 190 * Math.cos ( i + deltaI ), 200 - 190 * Math.sin ( i + deltaI ));

}

ctx1.closePath ();

ctx1.stroke ();

ctx2.closePath ();

ctx2.fillStyle = " rgb ( 120,78,89 )";

ctx2.fill ();

}

ctx1.strokeStyle = " rgba ( 255,255,255,125 )";

ctx1.beginPath ();

ctx1.arc ( 200, 200,40, 45 * ( Math.PI / 180), 315 * ( Math.PI / 180), false );

ctx1.closePath ();

ctx1.stroke ();

}

Зверніть увагу на одночасне існування двох контекстів малювання. Всі приклади коду даної статті ви може знайти на сайті автора: http://black-zorro.jino-net.ru. Наступного разу я покажу як відобразити на canvas існуючі зображення jpeg / gif, а також як працювати з кривими Безьє, крім того, ми зробимо введення в трансформації зміщення, обертання, масштабування.

3. Покрокове побудування HTML5 додатку

3.1 Програма

У HTML5 визначений елемент <canvas>, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту.

Код для візуалізації полотна з рамкою:

<canvas id = "tablet" width = "900" height = "500">

На цьому полотні й буде відображатися візуалізація та маніпуляція сітками елементів.

Далі розглянемо покрокове побудування HTML5 додатку.

Для того щоб маніпулювати програмою потрібен для цього користувальницький інтерфейс.

Розробимо дві кнопки для маніпулювання програмою:

HTML5:

<input type = "button" id = "_close" name = "_close" value = "Замкнуть" />

JavaScript:

_closed = new Boolean (false);

_closed = false;

До натискання:

Після натискання:

<input type = "button" id = "clear" name = "clear" value = "Очистить" />

clear = new Boolean (false);

clear = false;

До натискання:

Після натискання:

Створимо таблицю фігур:

HTML5:

<div id="FiguresOutput"> Таблица фигур: <br> </ div>

CSS:

# FiguresOutput {

position: relative;

float: bottom;

top: 20px;

JavaScript:

if (coordX.length === 0) {document.getElementById ('FiguresOutput'). innerHTML + = ("Фигура №" + (fn +1) + ":");}

if (newFigure === true) {document.getElementById ('FiguresOutput'). innerHTML + = ('<br>' + "Фигура №" + (fn +1) + ":");}

newFigure = false;

Тепер створимо таблицю координат:

HTML5:

<div id="CoordOutput"> Таблиця координат: <br> </ div>

CSS:

# CoordOutput {

position: relative;

float: right;

top:-500px;

left:-200px;

}

JavaScript:

coordX [n] = x; var m = n +1;

coordY [n] = y; document.getElementById ('CoordOutput'). innerHTML + = ("Точка" + m + "(" + coordX [n] + ";" + coordY [n] + ");" + '<br>');

n = n +1;

Список літератури

1. Пітер Лабберс, Брайан Олберс, Френк Салім HTML5 для професіоналів: потужні інструменти для розробки сучасних веб-додатків = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. - М.: «Вільямс», 2011. - С. 272. - ISBN 978-5-8459-1715-7

2. Стівен Хольцнер HTML5 за 10 хвилин, 5-е видання = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. - М.: «Вільямс», 2011. - ISBN 978-5-8459-1745-4

3. David Flanagan - Canvas Pocket Reference.Scripted Graphics for HTML5 2010

4. Rob_Hawkes-HTML5 Canvas for games & entertainment-2011-ebook

5. S.Fulton, J.Fulton - HTML5 Canvas - 2011

6. Чак Муссіано і Білл Кеннеді "HTML і XHTML. Детальний керівництво" 6-е видання. Видавництво: Символ-Плюс, 2008 р.

7. Ерік А. Мейер "CSS. Каскадні таблиці стилів. Детальний керівництво" 3-е видання. Видавництво: Символ-Плюс, 2008 р.

8. Роберт Агулар "HTML і CSS. Основа будь-якого сайту" Видавництво: Ексмо, 2010 р.

9. Е. Кастро "HTML і CSS для створення Web-сторінок" Видавництво: НТ Пресс, 2006 р.

10. Н. Комолова, Є. Яковлєва "HTML. Самовчитель" 2-е видання. Видавництво: Пітер, 2011 р.

11. Джейсон Кренфорд Тіге "DHTML і CSS для Internet" 3-е видання. Видавництво: НТ Пресс, 2007 р.

Размещено на Allbest.ru

...