Bu Elemanın Diğer Teknolojiye Göre Faydaları Var
HTML5, CANVAS adında heyecan verici bir öğe içerir. Çok fazla kullanım alanı vardır, ancak bunu kullanabilmek için bazı JavaScript, HTML ve bazen CSS'yi öğrenmeniz gerekir.
Bu, CANVAS elemanını birçok tasarımcı için biraz ürkütücü kılar ve aslında, çoğu CANVAS animasyonlarını ve oyunları JavaScript bilmeden oluşturmak için güvenilir araçlar bulunana kadar öğeyi göz ardı eder.
HTML5 Canvas Ne İçin Kullanılır?
HTML5 CANVAS öğesi daha önce kullanabileceğiniz birçok şey için kullanılabilir. Bunun için Flash gibi gömülü bir uygulama kullanmanız gerekir:
- dinamik grafikler
- çevrimiçi ve çevrimdışı oyunlar
- animasyonlar
- etkileşimli video ve ses
Aslında, insanların CANVAS öğesini kullanmasının asıl nedeni, düz bir web sayfasını dinamik bir web uygulamasına dönüştürmenin ne kadar kolay olduğu ve daha sonra akıllı telefonlarda ve tabletlerde kullanılmak üzere bu uygulamayı bir mobil uygulamaya dönüştürmesidir.
Eğer Flash Varsa, Neden Tuval Gerekir?
HTML5 spesifikasyonuna göre CANVAS öğesi:
“... grafikler, oyun grafikleri, sanat veya diğer görsel görüntüler için anında kullanılabilen çözünürlüğe bağlı bir bitmap tuval.”CANVAS öğesi, web sayfasında gerçek zamanlı olarak grafikler, grafikler, oyunlar, sanat ve diğer görseller çizmenize izin verir.
Bunu Flash ile zaten yapabileceğimizi düşünüyor olabilirsiniz, ancak CANVAS ve Flash arasında iki önemli fark vardır:
- CANVAS öğesi, HTML'de doğrudan yerleştirilmiştir. Üzerinde çizilen komut dosyaları HTML'de veya bağlantılı bir harici dosyada bulunur. Bu, CANVAS öğesinin belge nesne modelinin veya DOM'ın bir parçası olduğu anlamına gelir.
- Flash gömülü bir harici dosyadır. Görüntülemek için EMBED veya OBJECT öğesini kullanır ve doğrudan diğer HTML öğeleriyle etkileşimde bulunamaz. CANVAS öğesi DOM'ın bir parçası olduğu için DOM ile birçok şekilde etkileşime girebilir.
- Örneğin, sayfanın başka bir kısmı ile etkileşimde bulunulduğunda değişen bir animasyon oluşturabilir - örneğin form öğesi doldurulur. Flash ile, yapabileceğiniz en iyi şey, Flash film veya animasyonu başlatmaktır. CANVAS birçok farklı efekt oluşturabilir, hatta form alanından gelen metni canlandırmaya ekleyebilirsiniz.
- CANVAS öğesi, web tarayıcıları tarafından doğal olarak desteklenmektedir. Kullanıcıların aslında Flash kullanabilmeleri için tarayıcılarının eklentinin yüklü olması gerekir. Bu, çoğu zaman için Flash yüklemeleri veya işletim sistemlerinin basitçe desteklememesi nedeniyle çoğu insan için bir güçlüktür.
- Her tarayıcıda eklentinin yüklü olduğu anlaşılıyordu, ancak artık geçerli değil ve birçoğu zorluklardan dolayı eklentiyi bile kaldırabiliyor. Ayrıca, popüler iOS platformunda bile mevcut değil.
Flash'ı Kullanmak İçin Plan Yapmamış Olsanız bile Tuval Kullanışlıdır
CANVAS elemanının bu kadar kafa karıştırıcı olmasının ana nedenlerinden biri, birçok tasarımcının tamamen statik bir ağa alışmasıdır. Resimler animasyonlu olabilir, ancak bu GIF ile yapılır ve elbette videoya sayfalar yerleştirebilirsiniz ancak yine de, bu sayfa üzerinde oturan ve etkileşime bağlı olarak başlayan veya durdurulan statik bir videodur, ancak hepsi budur.
CANVAS öğesi web sayfalarınıza daha fazla etkileşim katmanıza olanak tanır, çünkü grafik, resim ve metni bir komut dosyası dili ile dinamik olarak kontrol edebilirsiniz. CANVAS öğesi görüntüleri, fotoğrafları, grafikleri ve grafikleri animasyonlu öğelere dönüştürmenize yardımcı olur.
Tuval Elemanı Kullanırken Ne Zaman Kullanılmalı?
CANVAS öğesini kullanıp kullanmayacağınıza karar verirken kitleniz ilk düşünceniz olmalı.
Kitleniz öncelikle Windows XP ve IE 6, 7 veya 8 kullanıyorsa, bu tarayıcılar desteklemediği için dinamik bir tuval özelliği oluşturmak anlamsız olacaktır.
Yalnızca Windows makinelerinde kullanılacak bir uygulama oluşturuyorsanız, Flash en iyi seçiminiz olabilir. Windows ve Mac bilgisayarlarda kullanılacak bir uygulama bir Silverlight uygulamasından yararlanabilir.
Ancak, uygulamanızın mobil cihazlarda (hem Android hem de iOS) ve modern masaüstü bilgisayarlarda (en yeni tarayıcı sürümlerine güncellenmiş) görüntülenmesi gerekiyorsa, CANVAS öğesini kullanmak iyi bir seçimdir.
Bu öğeyi kullanmanın, onu desteklemeyen eski tarayıcıların statik görüntüleri gibi yedek seçeneklere sahip olmanıza izin verdiğini unutmayın.
Bununla birlikte, her şey için HTML5 kanvasını kullanmanız önerilmez. Logonuz, manşonuz veya navigasyon gibi şeyler için asla kullanmamalısınız (her ne kadar bunların bir kısmını canlandırmak için kullanacaksanız iyi olur).
Belirtime göre, yapmaya çalıştığınız şey için en uygun öğeleri kullanmalısınız. Başlık ve logo için CANVAS öğesine tercih edilen HEADER elemanının resimler ve metin ile birlikte kullanılması tercih edilir.
Ayrıca, yazdırma gibi etkileşimli olmayan bir ortamda kullanılmak üzere tasarlanmış bir web sayfası veya uygulama oluşturuyorsanız, dinamik olarak güncelleştirilen CANVAS öğesinin beklediğiniz gibi yazdırılmayabileceğini bilmelisiniz. Mevcut içeriğin veya geri dönüş içeriğinin bir kopyasını alabilirsiniz.