Canvas createLinearGradient() Metodu

Canvas referans el kitabı

Tanım ve Kullanım

createLinearGradient() Metodu, lineer geçiş nesnesi oluşturur.

Geçişler, kareler, daireler, çizgiler, metinler vb. doldurma için kullanılabilir.

İpucu:Bu nesneyi strokeStyle veya fillStyle Özelliğin değeri.

İpucu:Kullanın: addColorStop() Bu yöntem, farklı renkleri ve gradient nesnesindeki renklerin konumunu belirtir.

Örnek

Ayrıca bakınız:

Sola sağa doğru siyaha, beyaza doğru geçişli bir geçiş tanımlayarak kare için 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);

Kişisel olarak deneyin

Sözdizimi

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

Parametre değeri

Parametre Açıklama
x0 Geçiş noktasının x koordinatı.
y0 Geçiş noktasının y koordinatı.
x1 Geçiş noktasının x koordinatı.
y1 Geçiş noktasının y koordinatı.

Daha fazla örnek

Örnek 2

Kare için doldurma stili olarak, yukarıdan aşağıya doğru geçişli bir geçiş tanımlayı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,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kişisel olarak deneyin

Örnek 3

Kare için doldurma stili olarak, siyaha, kırmızıya ve beyaza doğru geçişli bir geçiş tanımlayı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,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kişisel olarak deneyin

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.

Canvas referans el kitabı