У цій статті ми познайомимо вас c новим елементом HTML5 - canvas, який дозволяє малювати різні об'єкти і відображати в найсучасніших браузерах. Прочитавши цей урок, ви дізнаєтеся, як отримати доступ до елементу canvas, малювати фігури, змінювати кольори, і прати об'єкти. Купуйте путівку в сучасний світ Web технологій.
Знайомимося з елементом Canvas
Використовувати елемент canvas дуже просто
Коли ви чуєте слово canvas, то ви відразу ж думаєте про новий HTML5 елементі з однойменною назвою. Технічно, це тільки половина всієї правди, але давайте не будемо зараз говорити про це. Елемент canvas - це нововведення для всіх браузерів.
Для того щоб скористатися елементом canvas, необхідно просто створити відповідний HTML тег, а потім визначити ширину і висоту.
Але це звичайно ж далеко не все. Код, написаний вище помістить на вашу сторінку canvas з прозорим фоном. Увага: контент всередині тега canvas буде відображений тільки в тому випадку, якщо ваш браузер є застарілим і не підтримує дану функціональність.
Цей елемент тільки для найсучасніших браузерів
Мушу зазначити, що найсучасніші браузери підтримують даний елемент, навіть останній Internet Explorer.
До слова сказати, ви можете активувати даний елемент і в ранніх версіях Internet Explorer за допомогою даного плагіна - Explorer Canvas.
Розміри елемента Canvas
У прикладі, розташованому вище ви вже побачили як застосовувати атрибути ширини і висоти: width і height. Використовуючи CSS, ви також можете контролювати розміри canvas, як і інших HTML елементів. І це цілком логічно. Однак так як canvas використовує в своєму функціоналі так званий двовимірний контекст, то при застосуванні CSS до розмірів полотна, призведе до того, що всі внутрішні елементи будуть спотворені.
Трохи про двовимірному контексті
Трохи вище я сказав, що елемент canvas - це тільки половина всієї історії. Друга половина - це якраз і є двовимірний контекст, який по суті дозволяє вам бачити і всю міць функціоналу даного елемента.
Система координат
Якщо ви коли-небудь працювали з мовами, що мають справу з 2d графікою (такими як ActionScript, Processing, і т.д.), тоді ви знаєте все про системи координат, заснованих на русі. Двовимірний контекст в елементі canvas нічим не відрізняється від перерахованих систем. Він використовує стандартну систему координат Cartesian, з початковою точкою (0, 0), розташованої з лівої верхньої сторони. Рух вправо буде збільшувати значення об'єкта по осі x, в той час як рух вниз, буде збільшувати значення точок об'єкта по осі y. Все досить примітивно.
Одна одиниця даної системи координат дорівнює одному пікселю вашого екрану (в більшості випадків).
Отримання доступу до двовимірного контексту
В результаті виклику методу getContext, змінна ctx тепер буде посилатися на двовимірний контекст. Це означає, що тепер за допомогою цієї змінної ви можете почати малювати фігури на елементі canvas. Круто так?!
малюємо квадрати
Тепер, коли у нас є доступ до двовимірного контексту, ви можете сміливо починати користуватися всіма функціями вищезгаданого API. Однією з найбільш часто використовуваних функцій є fillRect, яка створює квадрати чорного кольору (за замовчуванням).
Додайте наступний код, використовуючи змінну ctx, про яку ми говорили перед цим:
Цей код намалює чорний квадрат в лівій верхній стороні полотна. Приблизно ось так от:
Вітаю! Ви тільки що намалювали вашу першу фігуру в HTML5 елементі canvas. Які відчуття?
У методі fillRect може бути прописано 4 параметра:
- Перший - це позиція по осі x;
- Другий - це позиція по осі y;
- Третій - це параметр, який відповідає за ширину;
- Четвертий - це висота.
Якщо розписати прототип методу в псевдокоді, то він буде виглядати наступним чином:
Ця функція приймає такий же набір аргументів, як і fillRect. В результаті ви отримаєте ще один квадрат:
Просто. Елегантно. І ще раз просто! Тепер ви зрозуміли принцип, за яким працює елемент canvas. Всі інші методи подібні цим двом. Їх використовувати так само просто. Якщо вам здається це чимось примітивним, то не переживайте. Всі ці елементи в сукупності можуть творити чудеса.
Малювання за схемою
Крім прямокутників (які можуть бути намальовані одним методом з API), ви так само можете малювати фігури за власною схемою. Завдяки схемам ви можете створювати прямі або вигнуті лінії, а так само більш складні фігури.
Щоб створити повноцінну схему, вам необхідно буде скористатися наступними методами з API:
- beginPath: початок схеми;
- moveTo: метод для створення точки;
- lineTo: малює лінію від точки до точки, які були створені методом moveTo, або до точки від минулого лінії, намальованої методом lineTo;
- closePath: завершити схему.
- fill: заповнити фігуру кольором.
- stroke: створити контур.
Спробуйте наступний приклад:
Даний код намалює трикутник чорного кольору:
Ті ж самі принципи ви можете використовувати для малювання фігур, які вам знадобляться. У наступному уроці, присвяченому цій темі, ми поговоримо про більш просунутому малюванні фігур, таких як овали, крива Безьє і ін.
Варто сказати про це саме зараз: малювання по схемі застосовується для створення більш складних фігур ніж прямокутники.
зміна кольорів
Оголошувати тут в принципі нічого, тому давайте відразу ж застосуємо їх на практиці:
Даний код забарвить квадрат в червоний колір:
Або ви можете змінити колір рамки квадрата:
Ось ви і навчилися застосовувати дані методи:
Методи fillStyle і strokeStyle зручні тим, що вони використовують ті ж кольори, що і в звичному вам CSS. Це означає, що ви можете використовувати RGB, RGBA, HSA, спеціальні слова ( "red") і шістнадцяткові значення.
Відразу варто відзначити, що зміна кольору не призводить до перетворення вже існуючого змісту елемента canvas. Наприклад, якщо ви намалювали чорний прямокутник, потім створили наповнювач для червоного кольору, а потім намалювали ще один прямокутник, то перша фігура залишиться чорною.
Зміна товщини ліній
Можете додати цей код в минулий приклад:
І ось який у вас вийде результат:
Такий же принцип ви можете застосувати до схем. Наприклад, ви можете змінити приклад з трикутником:
І ось що у вас вийде:
Стираємо об'єкти з Canvas
Остання річ, яку я хочу вам сьогодні показати - це стирання об'єктів. Ви вже знаєте, як намалювати фігуру. Тепер прийшов час дізнатися як від неї позбутися :)
У цьому прикладі на canvas 500px в ширину і 500px в висоту. Для очищення всієї площі, вам необхідно зробити наступне:
У цьому прикладі швидше за все не потрібно підтверджувати роботу коду скріншотом, так як ви нічого не побачите. Квадрат дійсно був намальований, а потім миттєво стертий.
Зауважте: аргументи для методу clearRect точно такі ж, як і для fillRect; x, y, ширина і висота.
Якщо ви не визначилися з висотою і шириною, то можете писати і так:
Стирання невеликих фрагментів
Для того щоб стерти невеликий фрагмент, вам не обов'язково зачищати всю площу елемента canvas. Ви без проблем можете стерти необхідну вам область. Уявіть, що у вас намальовано 2 квадрата, один з яких ви хочете стерти:
На даний момент картина така:
Ви без проблем можете стерти чорний квадрат, а червоний залишити на місці за допомогою методу clearRect:
Зауважте, що дані повинні збігатися з тими, що ви вказали при створенні елемента. Насправді даний метод просто змінює прозорість кожного піскелей:
Досить-таки просто, чи не так? Ви нечасто будете прати елементи при малюванні, однак ці знання знадобляться вам, коли ми будемо вчитися робити анімацію.
Йдемо в ногу з часом
Canvas простий у використанні і вивченні
Сподіваюся, ви переконалися в тому, що canvas - це дуже перспективний елемент веб сторінки. Він дозволяє створювати вам зображення, використовуючи чистий код без жодних плагінів. Він простий у використанні і вивченні, і насправді в умілих руках може перетворитися в щось дуже оригінальне.
У наступній статті, ми розглянемо деякі просунуті техніки роботи з елементом canvas, такими як малювання овалів, кривих ліній і інших речей. Якщо цього буде недостатньо, то в подальшому ми розповімо вам, як трансформувати об'єкти (повертати, зменшувати, збільшувати), як працювати з зображеннями, а так само попрацюємо з анімацією. Вам буде дуже цікаво, можете повірити мені на слово.
А зараз, я сподіваюся, ви отримали багато корисної інформації, яка дозволить вам отримати загальне уявлення про canvas. Даний елемент - це фантастична технологія, яка дозволить вам реалізувати всі фантазії, які зберігаються у вас в голові.
5 останніх уроків рубрики "HTML і DHTML"
При написанні або налагодження PHP скриптів ми частенько користуємося функціями var_dump () і print_r () для виведення попередніх даних масив і об'єктів. У цьому пості я б хотів розповісти вам про функції var_export (), яка може перетворити масив в формат, придатний для PHP коду.
Парочка безкоштовних шаблонів панелей адміністрування.
Створення шаблону для листа не така вже й проста справа. Пропонуємо вам підбірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.
Наприклад у вас є поле пошуку, яке обробляється при кожному натисканні клавіші клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде відправлений за наступними фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема ?.
Підбірка з 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.
Цю книгу вже давно все прочитали, а тут тільки що прокинулися.
adaev_kazbek
Це те саме що приказці - дурень не зрозуміє, розумний промовчить. У нашому випадку повно людей все ще не розбираються в веб-мастерингу, але намагаються. Щодо мене, я взагалі перший рік намагаюся все це самостійно вивчити, щоб в разі потреби мати можливість застосувати знання на ділі, і впевнений, що Євген ще не один кілограм новачків навчить, і ті будуть вдячні. Що відносно тебе, раз давно прочитав - навіщо став дивитися? ;-)
JS_JQ_BEST
Згоден з тобою, такий урок потрібен, далі буде простіше вивчати!
Я не читав. Але поки, мені здається, рано.
profesor08
Те-ж властивість CSS - border / border-radius. Над трикутником треба трохи більше хімічити. І буде працювати скрізь.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!