HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler) – BilgeBank
Cumartesi , Aralık 16 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML5 Dersleri / HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım..

Örnek Çalışma

Gradient Kullanımları

  1. createLinearGradient(x,y,x1,y1)
  2. createRadialGradient(x,y,r,x1,y1,r1)

İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı oluşturalım

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani4”); Komutumuz İle id si resimalani4 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”);  Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.
var grd = ctx.createLinearGradient(100,0,300,0); Komutumuzla renk geçiş komutlarını belirliyoruz sırasıyla şu şekilde değerler verdik

100 : soldan sağa turuncu rengimiz 100px e kadar renk değişmeden devam etsin  siyah renge 100px den sonra geçiş yapsın dedik.

0 : Komutumuz soldan sağa düz bir renk geçişi sağlanmasını sağladık buraya ekleyeceğiniz değer ile renk geçişinin kare içindeki değişimini farkedebilirsiniz burasıda y düzlemi içindeki başlangıç değerini belirler

300: Komutumuz ile siyah rengimizin başlangıcını belirledik ilk değerde verdiğimiz 100 ile 300 arasında renk tonlaması oluşturduk.

0: Komutumuzla 2. değerde verdiğimiz y düzleminin tersi yönünde başlangıç belirleyebilirsiniz başlatabilirsiniz

grd.addColorStop(0,”#F88C00″); Komutumuz ile 0 değerindeki yani ilk renk alanımıza #F88C00 renk kodumuzla turuncu tonlarında bir renk değeri belirledik

grd.addColorStop(1,”black”); Komutumuz ile 1 değerindeki ikinci renk alanımıza siyah renk olmasını tanımladık bu sayede renk geçişinin nasıl olduğunu daha iyi fark edebileceğiz.
ctx.fillStyle = grd;  Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createLinearGradient içinde belirliyoruz.

Örnek Kodlarda verdiğimiz değerlerde ufak değişiklikler yaparak hangi değerinm nerede işlem yaptığına bakabilirsiniz.

 

Ve İkinci canvas alanımızıda da createRadialGradient ile oval bir renk geçişi sağlayalım bunun için bir canvas alanı belirleyelim

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

var c = document.getElementById(“resimalani5”); Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

var grd = ctx.createRadialGradient(340,140,40,340,140,150); Komutumuz İle Asıl Değerlerimizi Burada Oluşturuyoruz.

createRadialGradient(x,y,r,x1,y1,r1) Değerimize bakarak

createRadialGradient metodumuzun içindeki ilk 3 parametre oluşturduğumuz turuncu alanımızı oluşturmamıza yarıyor 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla ve 40px çapında bir daire oluşturmasını istiyoruz.

Son 3 parametrede dış alanımızı belirliyor ve iç alanla aradaki renk geçişlerinin oluşmasını sağlıyor aynı alanda ve tam bir çember olması için 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla komutlarını belirtkten sonra 150px çapında bir daire oluşturarak renk katmanlarımızı oluşturuyoruz.

grd.addColorStop(0,”#F88C00″); Komutumuz İle İç alanda oluşturduğumuz turuncu rengi belirledik.

grd.addColorStop(1,”#44e9e5″); Komutumuz İle dış alanda oluşturduğumuz turkuaz rengi belirledik.

ctx.fillStyle = grd; Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createRadialGradient içinde belirliyoruz.

Çalışmalarda Değerleri Değiştirerek Nasıl Değişimler olduğuna bakarak mantığını iyice kavrayın umarım yararlı bir yazı olmuştur aklınıza takılan soruları yorum bölümünde sorabilirsiniz.

Hakkında BilgeBank

İlgili Makale

HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

Canvas Etiketimizle metin yazdırmak için 2 seçeneğe bakacağız biri dolgulu yazım biçimi FillText metodu diğeri içi …

Bir Cevap Yazın