HTML5 derslerimize devam ediyoruz.Bu derste radial gradient işlemini göreceğiz.Geçen derste linear gradienti işlemiştik.linear düz bir geçiş yapıyordu.Bu ise çember şeklinde renk geçişi yapıyor.
Kodumuz
createRadialGradient(x0,y0,r0,x1,y1,r1) budur.
x0 , y0 :İlk başlama konumudur.
r0 :İlk konumda oluşacak çemberin çapıdır.
x1 , y1 :İkinci çemverin oluşacağı konumdur.
r1 :Bu ise ikinci çemberin yarı çapıdır.
Bir örnek yapalım daha iyi anlarsınız.
Öncelikle sayfamıza canvas yani tuvalimizi 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 rg1 = cizim.createRadialGradient(150,75, 1, 150, 75, 60);
rg1.addColorStop(0, '#fff');
rg1.addColorStop(1, '#000');
cizim.beginPath();
cizim.rect(100, 50, 100, 50);
cizim.fillStyle =rg1;
cizim.fill();
</script>
Görüntüsü :
Öncelikle
cizim.createRadialGradient(150,75, 1, 150, 75, 60); ile bir gradient oluşturup değişkene atadık. 150,75 tuvale çizdiğimiz dikdörtgenin tam artasıdır.Diğer kodlara değinmiyorum çünkü diğer derslerde onları anlattım.
rg1.addColorStop ile gradiente renklerini atıyorum.2 parametresi var.İlk parametre 0-1 arası değer alır.2 parametre renktir.0 konumunda beyaz 1 de ie siyah olsun dedik.
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 rg1 = cizim.createRadialGradient(150,75, 1, 150, 75, 60);
rg1.addColorStop(0, '#fff');
rg1.addColorStop(1, '#a0d8ef');
var rg2 = cizim.createRadialGradient(325,100, 1, 325, 100, 50);
rg2.addColorStop(0, '#fff');
rg2.addColorStop(0.5, '#87e0fd');
rg2.addColorStop(1, '#05abe0');
var rg3 = cizim.createRadialGradient(500,75, 1, 500, 75, 20);
rg3.addColorStop(0, '#000');
rg3.addColorStop(1, '#fff');
cizim.beginPath();
cizim.rect(100, 50, 100, 50);
cizim.fillStyle =rg1;
cizim.fill();
cizim.beginPath();
cizim.arc(325,100, 50,0,7,false);
cizim.fillStyle = rg2;
cizim.fill();
cizim.beginPath();
cizim.rect(450, 50, 100, 50);
cizim.fillStyle =rg3;
cizim.fill();
</script>
</body>
</html>
Görüntüsü :
Kullanımı bu şekilde.
UstaDerslik
