Şekil ve Resim – HTML CANVAS

Geometrik Şekil Oluşturma

HTML Canvas kullanarak temel geometrik şekiller oluşturmak son derece kolaydır. HTML dilinin temellerini iyi bilen bir web tasarımcısı kolaylıkla canvas özelliklerini kullanabilir. Bu yazımıza temel geometrik şekillerin çizimlerinden bahsederek başlıyoruz.

NOT : Yazımız yapılması gereken işlemlerden teorik olarak bahsetmektedir. Vereceğimiz bağlantılar ile örnek uygulamalarımıza ulaşabilirsiniz.

Daire

Daire çizimi için kullanacağımız js metodu arc() olacaktır. Bu metod daha önceki yazımızda eğimli çizgi oluşturabilmek için gerekli olduğundan bahsetmiştik. Daire oluştururken x ve y koordinatlarını belirleyen iki değişken ile radius özelliklerinden faydalanmamız gerekmektedir.

Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız…

Dikdörtgen

Dikdörtgen çizimi için ise kullanacağımız temel metod rect() olacaktır. Böylece dört çizgiden oluşan dikdörtgen şeklinde bir geometrik çizimi html sayfamızda çizdirmiş olacağız. Genişliği belirlemek için width özelliğini ve boyutlarımızı belirlemek için ise x ve y koordinat değerlerini kullanacağız.

Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız…

Yarım Daire

Daire ile benzerlik göstermekle beraber değer atamalarında farklılıklar vardır. Bu değerleri belirlerken kullanacağımız metod sizinde tahmin edebileceğiniz gibi arc() metodudur. Ancak aşağıdaki bağlantıda yer alan örnek konuyu anlamanız için daha yararlı olacaktır.

Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız…

Üçgen

Üçgen şeklini oluşturmamız için belli bir metot olmadığından lineTo() metodu ile çizgiler oluşturmamız ve fill() metodu ile elde ettiğimiz şeklin içini istediğimiz renkte doldurmamız gerekmektedir.

Örnek kullanım için linke tıklayınız…

Renklendirme ve Dolgu

Dolgu Rengi

Yukarıda da bahsettiğimiz gibi dolgu için fill() metodunu kullanmamız gerekir. Doldurma yapacağımız şeklin dış tarafının rengini belirlemede strokeStyle özelliğine renk ataması yapmamız gerekir. Dolgu rengini belirlemek için ise fillStyle() metodunu kullanmamız gerekir. Verdiğimiz örneklerde şekillerin renklendirilmesi için zaten bu metodu kullandığımız için anlamak için diğer örneklerden faydalabilirsiniz.

Pattern Kullanımı

Şeklimizi bir renk yerine belirli bir desene göre belirlemek için pattern özelliğini kullanabiliriz. Photoshop bilen arkadaşların çoğu bu kavrama aşinadır.

Canvas kullanımın bize sağladığı önemli kolaylıklardan biri de createPattern özelliğidir. Bu özelliği bir js fonksiyonu içinde kullanarak gerekli değer ataması yapılır. Bu değerler ise fillStyle() metoduyla kullanılarak html sayfasında çizim gerçekleştirilir. Böylece css kullanmaya gerek kalmadan istenilen desende şekiller sayfaya render edilebilir.

Linke ulaşmak için tıklayınız…

Linear Gradient

Doğrusal bir şekilde renk tonları arasında geçiş efekti sağlamak için kullanılan renklendirme metodudur. CSS hakkında orta düzeyde bilginiz varsa bu kavramın size yabancı gelmemesi gerekir. Fakat bilgisi olmayan arkadaşlarda kolayca bu kavramı anlayabilirler. Örnek kulllanım için aşağıda yer alan linke tıklayınız.

Linke ulaşmak için tıklayınız…

Radial Gradient

Yukarıdaki özellikten farkı tonlar arası geçişi dairesel olarak gerçekleştirmesidir.

Örnek kullanım için bağlantıya tıklayınız…

HTML Canvas Resim Kullanımı

İstediğiniz resmi html sayfasına çizdirmek için kullanabileceğiniz canvas metodu drawImage() metodudur. Bu metot sayesinde çizdireceğiniz resimin boyutunu vereceğiniz değerlerle belirleyebilirsiniz. Resmin sol üst köşesinde yer alan tanımlama noktası belirleyerek canvas etiketinin başladığı yerden resim yüklemesi gerçekleştirilir.

İlk olarak image() metodo ile resim oluşturulur. Resmin yüklenmesi ve çizimin tamamlanması ise drawImage() metodu ile gerçekleştirilir. Örneği görmek için buraya tıklayabilirsiniz.

Resim boyutunu belirlemek için drawImage() metodunun “width” ve “height” özelliklerini aynen <img /> etiketinde olduğu gibi ancak uygulama açısından daha farklı şekilde kullanabilirsiniz.

Örnek kullanım için bağlantıya tıklayınız…

Bir diğer özellikse ise resim üzerinde istediğiniz bölümü kesebilir ve bunu çeşitli özellikleri kullanarak gerçekleştirebilirsiniz.

Örnek kullanım için bağlantıya tıklayınız…

NOT: Özelliklerden kısaca bahsetmemizin sebebi örnekleri uygulamanızı teşvik etmek ve kendinizin uygulayarak öğrenmesi içindir. Verdiğimiz örneklerde çeşitli fonksiyonlar ve metotlar kullanarak gerekli işlemleri gerçekleştirmekteyiz.

Canvas yazı serimizin bu bölümün sonuna geldik. Yazımızda HTML sayfamızın canvas etiketleri içerisinde geometrik şekiller oluşturma ve resim çizdirme işlemlerinden bahsettik. Canvas yazı serimiz devam edecektir. Umarım siz okurlarımıza yararlı olmuştur.

Kolay gelsin…