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 най-много, което можете да направите, е да стартирате Флаш филм или анимация, но с CANVAS можете да създадете много различни ефекти, дори да добавите текст от полето на формуляра в анимацията.
- Елементът CANVAS се поддържа от уеб браузърите. За да могат потребителите действително да използват Flash, браузърът им трябва да има инсталиран плъгин. Това често е караница за повечето хора поради остарели инсталирания на Flash или факта, че тяхната операционна система просто не го поддържа.
- По-рано всеки браузър имаше инсталиран плъгин, но това вече не е така и мнозина дори премахват приставката поради трудности. Плюс това дори не се предлага на популярния iOS платформа.
Canvas е полезно, дори ако никога не сте планирали да използвате Flash
Една от основните причини, поради които елементът CANVAS е толкова объркващ, е, че много дизайнери са свикнали с напълно статична мрежа. Изображенията може да са анимирани, но това е направено с GIF, и разбира се, можете да вградите видео в страници, но отново, това е статично видео, което просто се намира на страницата и може би започва или спира поради взаимодействие, но това е всичко.
Елементът CANVAS ви позволява да добавите много повече интерактивност към вашите уеб страници, защото сега можете да контролирате динамично графиките, изображенията и текста с помощта на скриптов език. Елементът CANVAS ви помага да превърнете изображения, снимки, диаграми и графики в анимирани елементи.
Кога да помислите за използването на елемента на платното
Вашата аудитория трябва да бъде вашето първо съображение, когато решавате дали да използвате елемента CANVAS.
Ако вашата аудитория използва предимно Уиндоус експи и IE 6, 7 или 8, тогава създаването на динамична функция на платното ще бъде безсмислено, тъй като тези браузъри не го поддържат.
Ако създавате приложение, което ще се използва само на машини с Windows, тогава Flash може да е най-добрият ви залог. Приложение, което ще се използва на компютри с Windows и Mac, може да се възползва от приложението Silverlight.
Ако обаче вашето приложение трябва да се разглежда както на мобилни устройства (както Android, така и iOS), както и на модерни настолни компютри (актуализирани до най-новите версии на браузъра), след което използването на елемента CANVAS е добър избор.
Имайте предвид, че използването на този елемент ви позволява да имате резервни опции като статични изображения за по-стари браузъри, които не го поддържат.
Не се препоръчва обаче да използвате HTML5 платно за всичко. Ти трябва никога използвайте го за неща като вашето лого, заглавие или навигация (въпреки че използването му за анимиране на част от някое от тях би било добре).
Според спецификацията трябва да използвате елементите, които са най-подходящи за това, което се опитвате да изградите. Така че използването на HEADER елемента заедно с изображения и текст е за предпочитане пред CANVAS елемента за вашия хедър и лого.
Също така, ако създавате уеб страница или приложение, което е предназначено да се използва в неинтерактивен носител като печат, трябва да знаете, че CANVAS елементът, който е бил динамично актуализиран, може да не се отпечатва, както очаквате. Може да получите отпечатък на текущото съдържание или на резервното съдържание.