HTML5 - Tuval Öğesi

eleman Tuval En çok beklenen yeniliklerden biri HTML5 Adobe'nin Flash eklentisine ciddi bir alternatif olduğu için, yerel yetenekleri sayesinde ve üçüncü taraf bir kitaplığa bağlı kalmadan, HTML5 standardının uygulanmasında bir sorun olması durumunda doğrudan kararlılık ve tarayıcı desteği alıyoruz. .
eleman Tuval belgelerimizdeki bir alanı sınırlandırmamızı sağlar HTML5 Javascript ile çizebileceğimiz ve hatta efektler ve hareketler ekleyebileceğimiz yer.
Tuval öğesi
Öğeyle çalışmaya başlamadan önce Tuval, temel özelliklerini tanımlayacağız, bunun bir akış elemanı olduğunu, HTML5'te tamamen yeni olduğunu, niteliklerinin yüksekliği için yüksekliği ve genişliği için genişliği olduğunu biliyoruz.
Aşağıda, belgemizde bir Kanvas'ı nasıl tanımlayabileceğimize dair küçük bir örnek görelim:

 Örnek Tarayıcınız öğeyi desteklemiyor tuval 

Örnekte neler olduğunu hızlıca görelim; ilk önce, kendi tarzımızı ayırt edebilmek için biraz kalın bir kenarlık atadığımız bir stil tanımlarız. Tuval boş, ardından Canvas öğesini açılış etiketi ile başlatıyoruz ve yükseklik ve genişlik özelliklerini tanımlıyoruz, etiketlerin içine, belgenin standardın bu özelliğini desteklemeyen bir tarayıcı ile açılması durumunda bir mesaj yerleştiriyoruz.
Şimdi biraz önce açıkladığımız bu kodun tarayıcımızda nasıl göründüğüne bakalım:

Gördüğümüz gibi şu anda sadece stillerde tanımlanmış sınırlarımız ve boş bir alanımız var, bu tarayıcımızın kullanımını desteklediği anlamına geliyor. Tuval.
İlk çizimimiz
Eğitimin başında da belirttiğimiz gibi Canvas içerisinde çizim yapmak ve eylemler yapmak için Javascript kullanmalıyız, bunun için adında bir yöntem kullanacağız. getContext () bu bizi Tuval bağlamına yerleştirir ve onunla birlikte ona ne göstereceğimizi söyleyebiliriz.
Rakamları hem 2B hem de 3B olarak çizebiliriz, bunun için ilk durumda "2d" argümanını geçiyoruz.
Neyi açıkladığımızı daha iyi tanımlamak için aşağıdaki örneğe bakalım:

 Örnek Tarayıcınız öğeyi desteklemiyor tuval 

Burada basitçe bir değişken tanımladık ctx nesneyi atayacağımız belge ve ikincisi yöntemi çağıracak getContext ve bunu Canvas öğesine uygulayın; o zaman ctx değişkeninin adı verilen bir yöntemi çağırdığını görüyoruz. Doldurmak ve buna bazı koordinatları geçiyoruz, yakından bakarsak 4 tarafını geçiyoruz, tarayıcıda bunu çizdiğini görelim:

Bu örnekte bir kare çizdik. Tuval, Olağanüstü bir şey değil, ancak bu öğenin nasıl çalıştığını göstermemize yardımcı oluyor. HTML5.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.