HTML5 canvas derslerimize devam ediyoruz.Bu derste linear gradienti işleyeceğiz.Linear gradient renk geçişlerini sağlamaktadır.Şimdi kodumuzu inceleyelim.
Gradient verme kodumuz
createLinearGradient(x0,y0,x1,y1); .parametrelerini inceleyelim.
x0,y0 gradientin başlama noktası.
x1,y1 gradientin bitiş noktası.
Örnek yapalım bir tane.Öncelikle sayfamıza canvasımızı koyalım.
<canvas id="canvas" width="600" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');
var gr1 = cizim.createLinearGradient(100,0,200,0);
gr1.addColorStop(0, '#8ED6FF');
gr1.addColorStop(0.5, '#333333');
gr1.addColorStop(1, '#dddddd');
cizim.beginPath();
cizim.rect(100, 50, 100, 50);
cizim.fillStyle = gr1;
cizim.fill();
</script>
İlk 2 kod erişim kodlarımız.Diğer dersleri okuyan bilir.Sonra ise bir değişken yaratıp tuvalimizde bir gradient yarat dedik.addColorStop ile 3 renk olsun bu gradientte dedik.
addColorStop ilk parametresi 0-1 arası değer alır.2 parametreside renktir.
Sonra bir diktörgen çizdirdik ekrana.Dikdötgenin rengi ise bizim yarattığımız dikdörtgen olsun dedik.
Görüntüsü :
Gördüğünüz gibi 3 rengimizde görünüyor.Burda dikkat etmemiz gereken.Dikdörtgeni 100 koordinatında çizdirdim.Gradienti ise 100 de yani x0 100 olarak başllattım.Dikdörtgenin genişliği 100 olduğu için x1 i 200 de bitirdim.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border:2px solid #333;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');
var gr1 = cizim.createLinearGradient(100,0,200,0);
gr1.addColorStop(0, '#8ED6FF');
gr1.addColorStop(0.5, '#333333');
gr1.addColorStop(1, '#dddddd');
var gr2 = cizim.createLinearGradient(0,50,0,100);
gr2.addColorStop(0, '#8ED6FF');
gr2.addColorStop(1, '#333333');
cizim.beginPath();
cizim.rect(100, 50, 100, 50);
cizim.fillStyle = gr1;
cizim.fill();
cizim.beginPath();
cizim.rect(450, 50, 100, 50);
cizim.fillStyle =gr2;
cizim.fill();
</script>
</body>
</html>
Görüntüsü :
Sağda yeni bir dikdörtgene gradient verdik.Bunun gradienti yukardan aşağı doğru.Çünkü dikdörtgeni 50 koordinatında başlatıp 50 pixel yükseklik verdik.gradientte y0 a 50 y1 e ise 100 girdik bu şekilde yukardan aşağı doğru yaptık.
UstaDerslik
