HTML5 Canvas Ders-9 Linear 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-9 Linear Gradient Yapımı

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

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

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.



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