HTML5 Canvas Ders-10 Radial Gradient Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-10 Radial Gradient Yapımı

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(1892)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/vunfr.png

Ö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ü :
http://ustaderslik.com/resim/ders/vunpz.png

Kullanımı bu şekilde.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol