HTML5 CANVAS adlı heyecan verici bir öğe içerir. Pek çok kullanım alanı vardır, ancak kullanmak için biraz JavaScript öğrenmeniz gerekir, HTML, ve bazen CSS.
Bu, CANVAS öğesini birçok tasarımcı için biraz göz korkutucu hale getirir ve aslında çoğu tasarımcı muhtemelen görmezden gelecektir. bilmeden CANVAS animasyonları ve oyunları oluşturmak için güvenilir araçlar olana kadar öğe JavaScript.
HTML5 Canvas Ne İçin Kullanılır?
HTML5 CANVAS öğesi, daha önce oluşturmak için Flash gibi gömülü bir uygulama kullanmanız gereken birçok şey için kullanılabilir:
- Dinamik grafikler
- Çevrimiçi ve çevrimdışı oyunlar
- Animasyonlar
- Etkileşimli video ve ses
Aslında, insanların CANVAS öğesini kullanmasının ana nedeni, düz bir web sayfasını çevirmenin ne kadar kolay olmasıdır. dinamik bir web uygulamasına dönüştürün ve ardından bu uygulamayı akıllı telefonlarda kullanılmak üzere bir mobil uygulamaya dönüştürün ve tabletler.
Flaşımız Varsa Neden Tuvale İhtiyacımız Var?
Göre HTML5 spesifikasyonu, CANVAS öğesi: "... grafikleri, oyun grafiklerini, sanatı veya diğer görsel görüntüleri anında oluşturmak için kullanılabilen çözünürlüğe bağlı bir bitmap tuvalidir."
CANVAS öğesi, doğrudan web sayfasında gerçek zamanlı olarak grafikler, grafikler, oyunlar, sanat eserleri ve diğer görselleri çizmenize olanak tanır.
Bunu Flash ile zaten yapabileceğimizi düşünüyor olabilirsiniz, ancak CANVAS ve Flash arasında iki büyük fark vardır:
- CANVAS öğesi doğrudan HTML'ye gömülüdür. Üzerine çizilen komut dosyaları ya HTML'de ya da bağlantılı bir harici dosyadadır. Bu, CANVAS öğesinin belge nesne modelinin (DOM) 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 diğer HTML öğeleriyle doğrudan etkileşime giremez. CANVAS öğesi DOM'nin bir parçası olduğu için DOM ile birçok şekilde etkileşime girebilir.
- Örneğin, doldurulan bir form öğesi gibi sayfanın başka bir bölümüyle etkileşime girdiğinde değişen bir animasyon oluşturabilirsiniz. Flash ile yapabileceğiniz en fazla şey, flaş film veya animasyon, ancak CANVAS ile form alanındaki metni animasyona bile ekleyerek birçok farklı efekt oluşturabilirsiniz.
- CANVAS öğesi, web tarayıcıları tarafından yerel olarak desteklenir. Kullanıcıların Flash'ı gerçekten kullanabilmeleri için tarayıcılarında eklenti yüklü olmalıdır. Eski Flash yüklemeleri veya işletim sistemlerinin bunu desteklememesi nedeniyle bu genellikle çoğu insan için bir güçlüktür.
- Eskiden her tarayıcıda eklenti kuruluydu, ancak artık durum böyle değil ve birçoğu zorluklar nedeniyle eklentiyi kaldırıyor. Ayrıca, popüler olanlarda bile mevcut değil. iOS platformu.
Kanvas, Flash Kullanmayı Hiç Planlamamış Olsanız Bile Faydalıdır
CANVAS öğesinin 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. Görüntüler canlandırılabilir, ancak bu GIF, ve elbette, videoyu sayfalara gömebilirsiniz, ancak yine, bu yalnızca sayfada oturan ve etkileşim nedeniyle başlayan veya duran statik bir videodur, ancak hepsi bu kadar.
CANVAS öğesi, web sayfalarınıza çok daha fazla etkileşim eklemenize olanak tanır çünkü artık grafikleri, görüntüleri ve metni dinamik olarak bir komut dosyası diliyle kontrol edebilirsiniz. CANVAS öğesi, görüntüleri, fotoğrafları, çizelgeleri ve grafikleri animasyonlu öğelere dönüştürmenize yardımcı olur.
Kanvas Öğesini Kullanmayı Ne Zaman Düşünmelisiniz?
CANVAS öğesini kullanıp kullanmamaya karar verirken hedef kitleniz ilk düşünceniz olmalıdır.
Kitleniz öncelikle Windows XP ve IE 6, 7 veya 8, bu tarayıcılar desteklemediğinden 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çeneğiniz olabilir. Windows ve Mac bilgisayarlarda kullanılacak bir uygulama Silverlight uygulamasından yararlanabilir.
Ancak, uygulamanızın mobil cihazlarda (hem Android hem de iOS) ve modern cihazlarda görüntülenmesi gerekiyorsa masaüstü bilgisayarlar (en son tarayıcı sürümlerine güncellendi), ardından CANVAS öğesini kullanmak iyi bir seçimdir.
Bu öğeyi kullanmanın, onu desteklemeyen eski tarayıcılar için statik resimler gibi yedek seçeneklere sahip olmanızı sağladığını unutmayın.
Ancak, her şey için HTML5 tuvalini kullanmanız önerilmez. Malısın asla logonuz, başlığınız veya navigasyonunuz gibi şeyler için kullanın (ancak bunlardan herhangi birinin bir kısmını canlandırmak için kullanmak iyi olur).
Spesifikasyona göre, oluşturmaya çalıştığınız şey için en uygun olan öğeleri kullanmalısınız. Bu nedenle, başlık ve logonuz için CANVAS öğesi yerine, resimler ve metinle birlikte HEADER öğesini kullanmak tercih edilir.
Ayrıca, eğer bir web sayfası veya yazdırma gibi etkileşimli olmayan bir ortamda kullanılması amaçlanan bir uygulamada, dinamik olarak güncellenen CANVAS öğesinin beklediğiniz gibi yazdırılmayabileceğini bilmelisiniz. Geçerli içeriğin veya yedek içeriğin bir çıktısını alabilirsiniz.