Този елемент има предимства пред други технологии
HTML5 включва вълнуващ елемент, наречен CANVAS. Той има много приложения, но за да го използвате, трябва да научите някои JavaScript, HTML, а понякога и CSS.
Това прави елемента CANVAS малко обезсърчаващ за много дизайнери и всъщност повечето вероятно ще пренебрегнат елемента, докато няма надеждни инструменти за създаване на анимации и игри на CANVAS без да знаете JavaScript.
Какво HTML5 платно се използва за
Елементът HTML5 CANVAS може да се използва за много неща, които преди това трябваше да използвате вградено приложение като Flash за генериране на:
- динамична графика
- онлайн и офлайн игри
- анимации
- интерактивно видео и аудио
Всъщност основната причина, поради която хората използват елемента CANVAS, е колко лесно е да превърнете обикновената уеб страница в динамично уеб приложение и след това да превърнете приложението в мобилно приложение за използване на смартфони и таблети.
Ако имаме Flash, защо имаме нужда от платно?
Според спецификацията на HTML5 елементът CANVAS е:
"... зависимо от резолюция растерно изображение, което може да се използва за изобразяване на графики, графики на игри, изкуство или други визуални изображения в движение".Елементът CANVAS ви позволява да рисувате графики, графики, игри, изкуство и други визуални елементи направо в уеб страницата в реално време.
Може би си мислите, че вече можем да направим това със Flash, но съществуват две големи разлики между CANVAS и Flash:
- Елементът CANVAS е вграден в HTML. Скриптовете, които черпят от него, са в HTML или в свързан външен файл. Това означава, че елементът CANVAS е част от модела на документа, или DOM.
- Flash е вграден външен файл. Използва елемента EMBED или OBJECT за показване и не може да взаимодейства директно с другите HTML елементи. Тъй като елементът CANVAS е част от DOM, той може да взаимодейства с DOM в много отношения.
- Например можете да създадете анимация, която да се променя, когато е взаимодействана друга част от страницата - като например попълване на елемент от формуляра. С Flash, най-много бихте могли да направите, ако стартирате Flash филма или анимацията, но с CANVAS можете да създадете много различни ефекти, дори добавяне на текст от полето на формата в анимацията.
- Елементът CANVAS е поддържан от уеб браузърите. За да могат потребителите действително да използват Flash, браузърът им трябва да има инсталиран приставката. Това често е главоболие за повечето хора поради остарели инсталации на Flash или факта, че тяхната операционна система просто не го поддържа.
- Беше, че всеки браузър е инсталирал приставката, но това вече не е така, а много от тях дори премахват приставката поради трудности. Освен това дори не е достъпна на популярната платформа на iOS.
Платно е полезно дори и ако никога не сте планирали да използвате Flash
Една от основните причини, поради които елементът CANVAS е толкова объркващ, е, че много дизайнери са свикнали с напълно статична мрежа. Изображенията може да са анимирани, но това е направено с GIF и разбира се, че можете да вградите видео в страници, но отново, това е статично видео, което просто седи на страницата и може би започва или спира поради взаимодействие, но това е всичко.
Елементът CANVAS ви позволява да добавяте много повече интерактивност към уеб страниците си, защото сега можете да контролирате графиките, изображенията и текста динамично със скриптов език. Елементът CANVAS ви помага да превърнете изображения, снимки, диаграми и графики в анимирани елементи.
Кога да обмислите използването на елемента на платното
Вашата аудитория трябва да бъде вашето първо съображение, когато решите дали да използвате елемента CANVAS.
Ако вашата аудитория използва предимно Windows XP и IE 6, 7 или 8, тогава създаването на функция за динамично платно ще бъде безсмислено, тъй като тези браузъри не я поддържат.
Ако създавате приложение, което ще се използва само на Windows, Flash може да е най-добрият ви залог. Приложение, което ще се използва на компютри с Windows и Mac, може да се възползва от приложението Silverlight.
Ако обаче приложението ви трябва да се показва на мобилни устройства (Android и iOS), както и на съвременни настолни компютри (актуализирани до най-новите версии на браузъра), използването на елемента CANVAS е добър избор.
Имайте предвид, че използването на този елемент ви позволява да имате резервни опции като статични изображения за по-стари браузъри, които не го поддържат.
Въпреки това, не се препоръчва използването на HTML5 платно за всичко. Никога не трябва да го използвате за неща като вашето лого, заглавие или навигация (въпреки че използването му за анимиране на част от някое от тях би било добре).
Според спецификацията, трябва да използвате елементите, които са най-подходящи за това, което се опитвате да изградите. Така че използването на елемента HEADER заедно с изображения и текст е за предпочитане пред елемента CANVAS за вашето заглавие и лого.
Също така, ако създавате уеб страница или приложение, предназначено за използване в не-интерактивна среда, като печат, трябва да сте наясно, че елементът CANVAS, който е бил динамично актуализиран, може да не отпечатва, както очаквате. Може да получите отпечатване на текущото съдържание или на резервното съдържание.