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.
Sonuç olarak, şeklimiz ve dolgumuz şöyle gürünecektir:
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>
tuval.fillRect(10,10,150,80);
</script>
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>
var can = document.getElementById("Canvas");
var tuval = can.getContext("2d");
// Gradyan oluşturuyoruz
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Oluşturduğumuz gradyan ile dolgu yapıyoruz
tuval.fillRect(10,10,150,80);
</script>
Sonuç olarak, şeklimiz ve dolgumuz şöyle gürünecektir:
Hiç yorum yok:
Yorum Gönder