Canvas createRadialGradient() Metodu
Tanım ve Kullanım
createLinearGradient() Method ile radyal/circular geçiş nesnesi oluşturur.
Geçiş, dikdörtgenler, daireler, çizgiler, metinler vb. doldurmak için kullanılabilir.
İpucu:Bu nesneyi strokeStyle veya fillStyle Özelliğin değeri.
İpucu:Kullanın addColorStop() Method, farklı renkleri ve gradient nesnesindeki renklerin konumunu belirler.
Örnek
Bir dikdörtgen çizin ve onu radyal/circular geçişle doldurun:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Gradient ile doldur
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Sözdizimi
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parametre değeri
| Parametre | Açıklama |
|---|---|
| x0 | Yavaşlamış başlangıç dairenin x eksenindeki koordinatı. |
| y0 | Yavaşlamış başlangıç dairenin y eksenindeki koordinatı. |
| r0 | Başlangıç dairenin yarıçapı. |
| x1 | Yavaşlamış bitiş dairenin x eksenindeki koordinatı. |
| y1 | Yavaşlamış bitiş dairenin y eksenindeki koordinatı. |
| r1 | Dairenin bitiş yarıçapı. |
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> elementini desteklememektedir.
