+3 8(066) 185-39-18
fПредмет:
Тип роботи:
Бакалаврська робота
К-сть сторінок:
53
Мова:
Українська
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 – які відповідно малюють прямокутник суцільним кольором, тільки кордон прямокутника, очищають частина області малювання. Всі ці функції отримують як параметр координати лівого верхнього кута прямокутника і його розміри.
Якщо вам необхідно намалювати більш складну фігуру, то слід використовувати Path. Path – це просто шлях по якому водиться віртуальний олівець. Шлях повинен початися, олівець проводить кілька ліній (дуг, кривих Безьє, прямокутників і т. д.), потім шлях закривається (цей крок необов'язковий, наприклад, ви самі довели лінію від останньої точки до першої). І останній крок – це запуск отрисовки або контуру Path, або її зафарбування, як варіант малюється і контур і фонова зафарбування одночасно.
Для того щоб намалювати лінію ви використовуєте дві базові функції moveTo (x, y), і lineTo (x, y). Перша з них піднімає невидимий олівець і переміщує його в точку (x, y), а другий переміщує олівець в точку (x, y) уже ведучи олівець по « листу «.
Якщо вам хочеться намалювати коло, дугу, то використовуйте функцію arc (x, y, radius, startAngle, endAngle, anticlockwise), її параметри соотвественно координати центру кола або дуги, потім йде радіус, параметри startAngle і endAngle – задають початок і кінець дуги в радіанах (і це важливо), останнім йде параметр anticlockwise – логічний ознака того, чи буде дуга малюватися за годинниковою або проти годинникової стрілки. У прикладі нижче я малюю дві зірки, одна з яких відображається у вигляді контура, другий у вигляді заливки суцільним кольором, також малюється приклад дуги. Для того щоб задати колір контуру використовується властивість strokeStyle.
Зверніть увагу на одночасне існування двох контекстів малювання. Всі приклади коду даної статті ви може знайти на сайті автора: 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;
СПИСОК ЛІТЕРАТУРИ:
- Пітер Лабберс, Брайан Олберс, Френк Салім HTML5 для професіоналів: потужні інструменти для розробки сучасних веб-додатків = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. – М. : «Вільямс», 2011. – С. 272. – ISBN 978-5-8459-1715-7
- Стівен Хольцнер HTML5 за 10 хвилин, 5-е видання = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. – М. : «Вільямс», 2011. – ISBN 978-5-8459-1745-4
- David Flanagan – Canvas Pocket Reference. Scripted Graphics for HTML5 2010
- Rob_Hawkes-HTML5 Canvas for games & entertainment-2011-ebook
- S. Fulton, J. Fulton – HTML5 Canvas – 2011
- Чак Муссіано і Білл Кеннеді «HTML і XHTML. Детальний керівництво» 6-е видання. Видавництво: Символ-Плюс, 2008 р.
- Ерік А. Мейер «CSS. Каскадні таблиці стилів. Детальний керівництво» 3-е видання. Видавництво: Символ-Плюс, 2008 р.
- Роберт Агулар «HTML і CSS. Основа будь-якого сайту» Видавництво: Ексмо, 2010 р.
- Е. Кастро «HTML і CSS для створення Web-сторінок» Видавництво: НТ Пресс, 2006 р.
- Н. Комолова, Є. Яковлєва «HTML. Самовчитель» 2-е видання. Видавництво: Пітер, 2011 р.
- Джейсон Кренфорд Тіге «DHTML і CSS для Internet» 3-е видання. Видавництво: НТ Пресс, 2007 р.