HTML Canvas Ders_4 Gradyanlar (Gradients)

Grandyanlar

Gradyanlar, gölge veya ışık efektleridir. Bir başka deyişle, iki veya daha fazla rengin yumuşak bir şekilde birbirine dönüşmesidir.

Dikdörtgenlerin, dairelerin, çizgilerin veya yazıların dolgu rengi olarak kullanılabilirler.

Bir canvas elemanının dolgu rengi, gölgeli de olabilir.

Gradyanların iki türü vardır:

• createLinearGradient(x,y,x1,y1) - doğrusal gradyanlar oluşturur.

• createRadialGradient(x,y,r,x1,y1,r1) - dairesel gradyanlar oluşturur.

Bir gradyan oluşturmak için, iki veya daha çok dolgu (stop) rengi kullanmamız gerekir.

addColorStop() metodu, dolgu renkelerini ve pozisyonlarını tanımlamamızı sağlar. Gradyan pozisyonları 0 ve 1 arasında herhangi bir değer alır.

Gradyan kullanırken, son aşamada, gradyanın fillStyle() veya strokeStyle() yapılarını ayarlamamız gerekir. Son olarak da gradyanın dolgu biçimi (daire, dikdörtgen, yazı...) belirtilir.

Aşağıda Doğrusal ve Dairesel Gradyan Örnekleri Verilmiştir:

createLinearGradient():

Gradyan kodu:

<canvas id="Canvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Tarayıcınız HTML5 canvas tagını desteklememektedir.</canvas>

<script>

var can = document.getElementById("Canvas");

var tuval = can.getContext("2d");

// Gradyan oluşturuyoruz

var gradyan = tuval.createLinearGradient(0,0,200,0);

gradyan.addColorStop(0,"red");

gradyan.addColorStop(1,"white");

// Oluşturduğumuz gradyan ile dolgu yapıyoruz

tuval.fillStyle = gradyan;
tuval.fillRect(10,10,150,80);
</script>

Sonuç olarak, şeklimiz ve dolgumuz şöyle gürünecektir:

Tarayıcınız HTML canvas elemanını desteklemiyor...

createRadialGradient():

Gradyan kodu:

<canvas id="Canvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Tarayıcınız HTML5 canvas tagını desteklememektedir.
</canvas>

<script>
var can = document.getElementById("Canvas");
var tuval = can.getContext("2d");

// Gradyan oluşturuyoruz

var grd = tuval.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Oluşturduğumuz gradyan ile dolgu yapıyoruz

tuval.fillStyle = grd;
tuval.fillRect(10,10,150,80);
</script>

Sonuç olarak, şeklimiz ve dolgumuz şöyle gürünecektir:

Tarayıcınız HTML canvas elemanının desteklemiyor...

sonraki ders için tıklayınız