HTML canvas createLinearGradient() Metodu

HTML5 Canvas Referans Kılavuzu

Tanım ve Kullanım

createLinearGradient() Metod, lineer 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ğinin değeri.

İpucu:Kullanın: addColorStop() Method, farklı renkleri belirler ve renklerin gradient nesnesindeki konumunu belirler.

Örnek

Ayrıca bakınız:

Bir siyahdan beyaza giden geçişi (soldan sağa doğru) tanımlayın, bu geçişi bir dikdörtgenin doldurma stili olarak kullanın:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Kendi kendine deneyin

Sözdizimi

context.createLinearGradient(x0,y0,x1,y1);

Parametre Değerleri

Parametreler Açıklama
x0 Geçişin başlangıç noktasının x koordinatı
y0 Geçişin başlangıç noktasının y koordinatı
x1 Geçişin bitiş noktasının x koordinatı
y1 Geçişin bitiş noktasının y koordinatı

Daha fazla örnek

Örnek 2

Bir geçiş tanımlayın (yukarıdan aşağıya doğru), bu geçişi bir dikdörtgenin doldurma stili olarak kullanın:

Tarayıcınız canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"siyah");
my_gradient.addColorStop(1,"beyaz");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kendi kendine deneyin

Örnek 3

Bir siyahdan kırmızıya ve beyaza giden geçiş tanımlayın, bu geçişi bir dikdörtgenin doldurma stili olarak kullanın:

Tarayıcınız canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"siyah");
my_gradient.addColorStop(0.5,"kırmızı");
my_gradient.addColorStop(1,"beyaz");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kendi kendine deneyin

Tarayıcı desteği

Tablo'daki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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.

HTML5 Canvas Referans Kılavuzu