З першого погляду використання полотна може здаватися схожим на використання програми MS Paint, вставленої у вікно браузера. Але, копнувши глибше, можна побачити, що полотно - ключовий компонент для ряду графічно просунутих додатків, включаючи деякі додатки, про які ви вже, напевно, і самі подумали - гри, картографічні інструменти та динамічні графіки, і такі, які ви, можливо, не могли уявити - музично-світлові вистави і емулятори фізичних процесів.
В не дуже далекому минулому створення таких додатків без допомоги модулів розширення, таких як Flash, було надзвичайно складним завданням. Сьогодні ж полотно раптово робить всі ці додатки можливими, якщо, звичайно, ви готові на додаткові тимчасові та інтелектуальні затрати.
Базові можливості Canvas
елемент
Розміри полотна завжди слід встановлювати за допомогою атрибутів width і height елемента
Зазвичай полотно відображається як порожній прямокутник без рамки, тобто його не видно взагалі. Щоб зробити полотно видимим, за допомогою таблиці стилів йому можна дати кольоровий фон або рамку, як показано в наступному коді:
Отриманий результат, який буде нашою відправною точкою у вивченні Canvas показаний на малюнку:
Контекст можна розглядати як надпотужний інструмент малювання, який виконує всі необхідні для цього операції, такі як створення прямокутників, друкування тексту, вставка зображень і т.п. Це щось на зразок універсальної майстерні для операцій малювання на полотні.
Той факт, що контекст явно називається двовимірним (і в коді вказується як "2d"), породжує очевидне запитання, а саме: чи існує тривимірний контекст малювання? Відповідь на це питання - поки немає, але ясно, що творці HTML5 залишили місце для нього в майбутньому.
Отримати об'єкт контексту і почати малювання можна в будь-який момент, наприклад, відразу ж після завантаження сторінки, коли користувач клацне мишею, і т.п. Вам, швидше за все, вже не терпиться створити сторінку, на якій можна було б відразу ж приступити до практичної роботи з полотном. У наступному лістингу приведений код для створення шаблону такої сторінки:
У розділі розмітки