Canvas addColorStop() Metodu
Tanım ve kullanım
addColorStop() Metod, gradient nesnesindeki renkleri ve konumları belirler.
addColorStop() yöntemi ile createLinearGradient() veya createRadialGradient() Birlikte kullanılır.
Açıklama:addColorStop() yöntemini birden fazla kez çağırarak gradyanı değiştirebilirsiniz. Eğer gradient nesnesini bu yöntemle kullanmazsanız, gradyan görünmez olacaktır. Görünür bir gradyan elde etmek için en az bir renk etiketi oluşturmanız gerekmektedir.
Örnek
Örnek 1
Karenin doldurma stili olarak siyahdan beyaza olan bir gradyan tanımlayın:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"siyah");
grd.addColorStop(1,"beyaz");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
İpucu:Sayfa altında daha fazla örnek sağlanmaktadır.
Sözdizimi
gradient.addColorStop(stop,color);
Parametre değeri
| Parametre | Açıklama |
|---|---|
| stop | 0.0 ile 1.0 arasında olan değerler, gradyanın başlangıcı ile bitimi arasındaki konumu belirtir. |
| color | Son konumda gösterilen CSS renk değeri. |
Daha fazla örnek
Örnek 2
Çoklu addColorStop() yöntemleri ile gradyan tanımlanır:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"siyah");
grd.addColorStop("0.3","mor");
grd.addColorStop("0.5","mavi");
grd.addColorStop("0.6","yeşil");
grd.addColorStop("0.8","sarı");
grd.addColorStop(1,"kırmızı");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Tarayıcı desteği
Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> öğesini desteklememektedir.
