Canvas fillStyle Özelliği

Canvas Referans Kılavuzu

Tanım ve Kullanım

fillStyle Renklendirme, soluk veya desen kullanarak doldurma rengi, soluk veya deseni ayarlamak veya döndürmek için kullanılır.

Örnek

Örnek 1

Mavi dolguyla rectangle tanımlama:

Tarayıcınız canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Kişisel olarak deneyin

İpucu:Sayfa altında daha fazla örnek sunulmaktadır.

Gramer

context.fillStyle=color|gradient|pattern;

Özellik değeri

Değer Açıklama
color Çizim doldurma rengini belirler CSS renk değeri). Varsayılan değer #000000'dır.
gradient Dolgu görseli için kullanılan geçiş nesnesi (LineerveyaRadyoaktif)
pattern Dolgu görseli için kullanılan pattern nesnesi.

Teknik ayrıntılar

Varsayılan değer: #000000

Daha fazla örnek

Örnek 2

Yukarıdan aşağıya olan geçişi tanımlayan, rectangle'nın doldurma stili olarak:

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

Soldan sağa olan geçişi tanımlayan, rectangle'nın doldurma stili olarak:

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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kişisel olarak deneyin

Örnek 4

Siyahdan kırmızıya beyaza olan geçişi tanımlayan, rectangle'nın doldurma stili olarak:

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

Örnek 5

Kullanılan görsel:

lamp

Görselle fill etme:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Kişisel olarak deneyin

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam 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

Dikkat:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

Canvas Referans Kılavuzu