Bu element digər texnologiyaların üstünlüyünə malikdir
HTML5, CANVAS adlı maraqlı bir elementi ehtiva edir. Bu çox istifadə edir, lakin istifadə etmək üçün bəzi JavaScript, HTML və bəzən CSS öyrənmək lazımdır.
Bu, CANVAS elementini bir çox dizaynerlər üçün bir qədər çətinləşdirir və əslində JavaScript-ni bilmədən CANVAS animasiyalarını və oyunlarını yaratmaq üçün etibarlı vasitələrə qədər ən çox ehtimal elementi görməyəcəkdir.
HTML5 Canvas üçün nə istifadə olunur
HTML5 CANVAS elementi daha əvvəl bir çox şey üçün istifadə edilə bilər ki, əvvəllər yaratmaq üçün Flash kimi əlaqədar proqramı istifadə etməlisiniz:
- dinamik qrafika
- onlayn və offline oyunlar
- animasiyalar
- interaktiv video və audio
Əslində, insanların CANVAS elementini istifadə etdiyinin əsas səbəbi düz veb səhifəni dinamik bir web proqramına çevirmək və sonra tətbiqin smartfon və tabletlərdə istifadə üçün mobil tətbiqə çevrilməsinin nə qədər asan olması səbəbidir.
Əgər biz Flash var, Niyə Tuval lazımdır?
HTML5 spesifikasiyasına görə, CANVAS elementi:
"... qrafikə, oyun qrafika, sənət və ya digər əyani təsvirləri uçmaq üçün istifadə edilə bilən qətnamə bağlı bitmap kətan".CANVAS elementi veb-səhifənin real vaxtında qrafik, qrafik, oyun, sənət və digər görselləri düzəltməyə imkan verir.
Siz artıq Flash ilə bunu edə biləcəyinizi düşünürsünüz, ancaq CANVAS və Flash arasında iki fərq var:
- CANVAS elementi HTML-də düzəldilmişdir. Onu çəkən skriptlər ya HTML və ya əlaqəli xarici faylda olur. Bu CANVAS elementi sənəd obyekt modeli və ya DOM bir hissəsidir.
- Flash, əlaqədar xarici fayldır. Göstərmək üçün ya EMBED ya da OBJECT elementindən istifadə edir və digər HTML elementləri ilə birbaşa əlaqə saxlaya bilmir. CANVAS elementi DOM-in bir hissəsi olduğundan, DOM ilə bir çox yollarla əlaqə saxlaya bilər.
- Məsələn, səhifənin digər bir hissəsi ilə əlaqə saxlandıqda dəyişən bir animasiya yarada bilərsiniz - məsələn, doldurulma forması elementi. Flash ilə ən çox edə bilərsiniz, Flash filmi və ya animasiyaya başlamaq olar, lakin CANVAS bir çox fərqli təsəvvür yarada, hətta animasiya şəklində mətn əlavə edir.
- CANVAS elementi veb-brauzerlər tərəfindən yerli dəstəklənir. Istifadəçilər həqiqətən Flash istifadə üçün, onların brauzer yüklü plugin olmalıdır. Bu, köhnəlmiş Flash quraşdırmaları və ya əməliyyat sisteminin sadəcə onu dəstəkləməməsi səbəbindən çoxu üçün bir çox çətinlikdir.
- Hər bir brauzerdə quraşdırılmış plugin var idi, amma bu artıq vəziyyət deyil və bir çoxları da çətinliklər səbəbiylə plugin çıxarır. Üstəlik, bu məşhur iOS platformasında da mövcud deyil.
Flashdan istifadə etməyi planlaşdırmırsan belə Canvas faydalıdır
CANVAS elementinin bu qədər qarışıq olduğunun əsas səbəblərindən biri çox dizaynerlərin tamamilə statik bir web üçün istifadə edilməsidir. Şəkillər cizgi ola bilər, ancaq bu GIF ilə həyata keçirilir və əlbəttə ki, videoları səhifələrə yerləşdirə bilərsiniz, lakin yenə də, sadəcə səhifədə oturan və qarşılıqlı təsirlərdən ötəri başlayan və ya dayanan statik bir video deyil, hamısı.
CANVAS elementi veb-səhifələrinizə daha çox interaktivlik əlavə etməyə imkan verir, çünki indi qrafikləri, şəkilləri və mətni skript dili ilə dinamik şəkildə idarə edə bilərsiniz. CANVAS elementi şəkilləri, şəkilləri, diaqramları və qraflarını animasiya elementlərinə çevirməyə kömək edir.
Tuval elementindən istifadə edərkən düşünün
CANVAS elementindən istifadə etməyinizə dair qərar verərkən tamaşaçılarınız ilk diqqətiniz olmalıdır.
Tamaşaçılar ilk növbədə Windows XP və IE 6, 7 və ya 8 istifadə edirlərsə, dinamik bir kətan yaratmaq bu brauzerlər onu dəstəkləməməsi səbəbindən mənasız olacaq.
Yalnız Windows maşınlarında istifadə ediləcək bir proqram qurarsanız, Flash ən yaxşı hesab ola bilər. Windows və Mac kompüterlərində tətbiq olunacaq bir tətbiq Silverlight tətbiqindən faydalana bilər.
Lakin tətbiqiniz mobil qurğular (həm Android və iOS), həm də müasir masa üstü kompüterlər (ən son brauzer versiyalarına yenilənir) ilə izlənilməlidirsə, onda CANVAS elementindən istifadə etmək yaxşı seçimdir.
Bu elementdən istifadə etməyiniz onu dəstəkləməyən köhnə brauzerlər üçün statik şəkillər kimi ehtiyat variantlarına malik olmağı unutmayın.
Bununla belə, hər şey üçün HTML5 kətanından istifadə etmək məsləhət görülmür. Siz onu logo, başlıq və ya naviqasiya kimi şeylər üçün heç vaxt istifadə etməməlisiniz (bunlardan hər hansı bir hissəsini canlandırmaq üçün istifadə etmək yaxşı olardı).
Spesifikasiyaya əsasən, qurmağa çalışdığınız şeyə uyğun olan elementləri istifadə etməlisiniz. Beləliklə HEADER elementini şəkillərlə və mətnlə birlikdə istifadə edərək, başlıq və logo üçün CANVAS elementinə üstünlük verilir.
Ayrıca, çap kimi qeyri-interaktiv mühitdə istifadə edilməsi nəzərdə tutulan bir veb səhifə və ya proqram yaratdığınız halda, dinamik şəkildə yenilənən CANVAS elementi gözlədiyiniz kimi çap edilə bilməz. Mövcud məzmunun və ya ehtiyatın məzmununun çapını əldə edə bilərsiniz.