Бұл элемент басқа технологиялардан артықшылықтарға ие
HTML5 құрамында CANVAS атты қызықты элемент бар. Онда пайдалану көп, бірақ оны пайдалану үшін JavaScript, HTML және кейде CSS-ті үйрену керек.
Бұл CANVAS элементін көптеген дизайнерлер үшін біршама қуанышқа бөлейді және, шын мәнінде, JavaScript-ды білместен CANVAS анимациялары мен ойындарын жасау үшін сенімді құралдар болмағанша, көпшілігі элементті елемейді.
HTML5-нің Canvas-ны қалай қолдануға болады
HTML5 CANVAS элементі бұрыннан Flash жасау сияқты ендірілген бағдарламаны пайдалану керек болатын көптеген нәрселер үшін пайдаланылуы мүмкін:
- динамикалық графика
- онлайн және офлайн ойындар
- анимациялар
- интерактивті бейне және дыбыс
Адамдар CANVAS элементін пайдаланғанның басты себебі қарапайым веб-бетті динамикалық веб-бағдарламаға айналдыру және смартфондар мен планшеттерде қолдану үшін мобильді бағдарламаға айналдыру қаншалықты жеңіл екендігі.
Егер біз жарқылдаса, неге кенепте керек?
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 элементінің соншалықты шатастыратын негізгі себептерінің бірі - көптеген дизайнерлердің статистикалық веб-торапқа қолданылуы. Суреттер анимацияланған болуы мүмкін, бірақ бұл GIF арқылы орындалады және әрине, сіз бейнені беттерге ендіре аласыз, бірақ қайтадан - бұл бетіне жай отыратын және өзара әрекеттесуіне байланысты басталуы немесе тоқтатылуы мүмкін статикалық бейне.
CANVAS элементі сіздің веб-беттеріңізге әлдеқайда көп интерактивтілік қосуға мүмкіндік береді, себебі енді сіз графиканы, суреттерді және мәтінді сценарий тілімен динамикалық түрде басқара аласыз. CANVAS элементі бейнелерді, суреттерді, диаграммаларды және графиктерді анимациялық элементтерге айналдыруға көмектеседі.
Кенеп мата элементтерін пайдалану туралы ойланған кезде
CANVAS элементін пайдалану туралы шешім қабылдаған кезде сіздің аудиторияңыз бірінші кезекте тұруы керек.
Егер аудитория Windows XP және IE 6, 7 немесе 8-ні қолданса, онда динамикалық кенеп жасау мүмкіндігі пайда болмайды, себебі бұл браузерлер оны қолдамайды.
Егер Windows машиналарында ғана қолданылатын бағдарламаны құрастыратын болсаңыз, онда Flash ең жақсы ставка болуы мүмкін. Windows және Mac компьютерлерінде қолданылатын бағдарлама Silverlight қолданбасынан пайдасы мүмкін.
Дегенмен, сіздің қосымшаңызды мобильді құрылғыларда (Android және iOS), сондай-ақ заманауи үстел компьютерлерін (соңғы шолғыш нұсқаларына жаңартылған) көру керек болса, онда CANVAS элементін пайдалану жақсы таңдау болып табылады.
Бұл элементтің пайдаланылуын қолдамайтын ескі браузерлер үшін статикалық кескіндер сияқты қалпына келтіру опцияларын алуға мүмкіндік беретінін есте сақтаңыз.
Дегенмен, барлық нәрсе үшін HTML5 кенепті пайдалану ұсынылмайды. Сіз оны логотипіңіз, тақырып немесе навигация сияқты нәрселер үшін ешқашан пайдаланбаңыз (олардың кез келгенінің бір бөлігін тірілту үшін қолдансаңыз жақсы болар еді).
Техникалық сипаттамаға сай, сіз өзіңіз жасауға тырысатын элементтерге қолайлы элементтерді қолданыңыз. Осылайша HEADER элементін суреттермен және мәтінмен бірге пайдалану тақырыпты және логотипіңіз үшін CANVAS элементіне жақсырақ.
Сондай-ақ, басып шығару сияқты интерактивті емес ортада қолдануға арналған веб-бетті немесе бағдарламаны жасайтын болсаңыз, динамикалық түрде жаңартылған CANVAS элементі күткендей басып шығарылмайтынын білуіңіз керек. Ағымдағы мазмұнның немесе жаңартылған мазмұнның басып шығарылуы мүмкін.