Ushbu element boshqa texnologiyalar bo'yicha ustunlikka ega
HTML5 "CANVAS" deb atalgan qiziqarli elementni o'z ichiga oladi. Ko'p ishlatadigan narsalar mavjud, ammo ulardan foydalanish uchun siz JavaScript-ni, HTML-ni va ba'zida CSS-ni o'rganishingiz kerak.
Bu CANVAS elementini bir nechta dizaynerlar uchun jiddiy holga keltiradi va aslida, JavaScript-ni bilmasdan CANVAS animatsiyalari va o'yinlar yaratish uchun ishonchli vositalar mavjud bo'lmaguncha, aksariyati elementni e'tiborsiz qoldiradi.
Qanday HTML5 kanvas uchun ishlatilgan
HTML5 CANVAS elementi ilgari yaratilgan Flash kabi o'rnatilgan ilovalardan foydalanish kerak bo'lgan ko'p narsalar uchun ishlatilishi mumkin:
- dinamik grafikalar
- onlayn va oflayn o'yinlar
- ko'rsatuvlar
- interaktiv video va audio
Aslida, odamlar CANVAS elementini ishlatishning asosiy sababi oddiy veb-sahifani dinamik veb-dasturlarga aylantirish va keyinchalik ushbu ilovani smartfon va planshetlarda ishlatish uchun mobil ilovalarga aylantirish qanchalik oson ekanligidir.
Agar biz Flashga ega bo'lsak, nega tuvali kerak?
HTML5 spetsifikatsiyasiga muvofiq, CANVAS elementi:
"... grafikaga, o'yin grafikalariga, san'atga yoki boshqa ingl. Tasvirlarga chizish uchun ishlatilishi mumkin bo'lgan piksellar soniga bog'liq bitmapli tuvali."CANVAS elementi veb-sahifasida real vaqtda grafikalar, grafikalar, o'yinlar, san'at va boshqa tasvirlarni chizish imkonini beradi.
Siz Flash-da allaqachon qilishimiz mumkin deb o'ylashingiz mumkin, lekin CANVAS va Flash o'rtasidagi ikkita asosiy farq bor:
- CANVAS element HTML formatida o'ngga kiritilgan. Unga chizilgan skriptlar HTML yoki tashqi faylda joylashgan. Buning ma'nosi, CANVAS elementi hujjat ob'ekt modeli yoki DOMning bir qismidir.
- Flash - bu tashqi fayl. Ko'rish uchun EMBED yoki Ob'ekt elementidan foydalanadi va boshqa HTML elementlari bilan bevosita muloqot qila olmaydi. CANVAS elementi DOMning bir qismi bo'lgani uchun DOM bilan ko'p jihatdan o'zaro aloqa qilish mumkin.
- Misol uchun, sahifaning boshqa bir qismi (masalan, to'ldiriladigan ariza elementi kabi) bilan almashinadigan animatsiya yaratishingiz mumkin. Flash bilan eng ko'p siz Flash filmini yoki animatsiyasini boshlash kerak, ammo CANVAS sizga turli xil effektlarni yaratishi mumkin, hatto matnni ariza maydonidan animatsiyaga qo'shishingiz mumkin.
- CANVAS elementi veb-brauzerlar tomonidan qo'llab-quvvatlanadi. Foydalanuvchilar aslida Flashni ishlatishlari uchun ularning brauzerida o'rnatilgan plagin bo'lishi kerak. Bu ko'pincha odamlar uchun eskirgan Flash-ni o'rnatish yoki operatsion tizimini oddiygina qo'llab-quvvatlamasligi tufayli ko'pincha qiyinchilik tug'diradi.
- Har bir brauzerda o'rnatilgan plagin bor edi, lekin bu endi emas, va ko'pchilik qiyinchiliklar tufayli plaginni olib tashlashadi. Bundan tashqari, u mashhur iOS platformasida ham mavjud emas.
Agar siz Flashni ishlatishni rejalashtirmagan bo'lsangiz ham, tuvali foydali
CANVAS elementi shu qadar murakkablashayotganining asosiy sabablaridan biri shundaki, ko'plab dizaynerlar butunlay statik tarmoqqa ishlatilgan. Rasmlar jonlantirilgan bo'lishi mumkin, ammo bu GIF bilan amalga oshiriladi va, albatta, siz videoni sahifalarga joylashtirishingiz mumkin, lekin yana bir bor, bu oddiy sahifada o'ynaydigan va ta'sir o'tkazish tufayli boshlangan yoki to'xtab turgan statik video.
CANVAS elementi sizning veb-sahifalaringizga ko'proq interaktivlik kiritish imkonini beradi, chunki hozir siz grafikalar, tasvirlar va matnlarni skript tilida dinamik ravishda nazorat qilishingiz mumkin. CANVAS elementi rasmlar, rasmlar, grafikalar va grafikalarni jonlantirilgan elementlarga aylantirishga yordam beradi.
Tuval elementlaridan foydalanish haqida o'ylash qachon
Sizning auditoriyangiz sizning birinchi e'tiboringizni CANVAS elementidan foydalanishga qaror qilishda qabul qilishingiz kerak.
Tomoshabinlar birinchi navbatda Windows XP va IE 6, 7 yoki 8 dan foydalansalar, dinamik tuval yaratish imkoniyati bu brauzerlar uni qo'llab-quvvatlamagani uchun noaniq bo'ladi.
Agar siz faqat Windows-da ishlatiladigan dastur tuzadigan bo'lsangiz, Flash sizning eng yaxshi pul tikishingiz mumkin. Windows va Mac kompyuterlarida ishlatiladigan dastur Silverlight ilovasidan foydalanishlari mumkin.
Biroq, sizning ilovangiz mobil qurilmalar (Android va iOS) hamda zamonaviy stol kompyuterlari (eng so'nggi brauzer versiyalariga yangilangan) orqali ko'rish kerak bo'lsa, u holda CANVAS elementini ishlatish yaxshi tanlovdir.
Ushbu elementni ishlatib, uni qo'llab-quvvatlamaydigan eski brauzerlar uchun statik rasmlarga o'xshash chiroyli variantlarga ega bo'lishingiz mumkinligini yodda tuting.
Biroq, har bir narsa uchun HTML5 kanvasidan foydalanish tavsiya etilmaydi. Uni hech qachon logotip, sarlavha yoki navigatsiya kabi narsalar uchun ishlatmasligingiz kerak (ulardan har qanday qismini jonlantirish uchun foydalanish yaxshi bo'lishi mumkin).
Texnikaga muvofiq, siz yaratmoqchi bo'lgan narsalarga mos keladigan elementlardan foydalaning. Shunday qilib, HEADER elementini rasm va matn bilan birga ishlatish sizning nomingiz va logotipingiz uchun CANVAS elementiga ma'quldir.
Bundan tashqari, siz bosib chiqarish kabi interaktiv bo'lmagan muhitda foydalanishni rejalashtirayotgan veb-sahifani yoki ilovani yaratmoqchi bo'lsangiz, siz kutganingizdek, dinamik ravishda yangilangan CANVAS elementi chop etilmasligi mumkin. Mavjud kontent yoki chop etilgan kontentni chop etishingiz mumkin.