HTML canvas fillStyle özelliği

HTML5 Canvas Referans Kılavuzu

Tanım ve Kullanım

fillStyle fillStyle özelliği, çizimleri doldurmak için kullanılan rengi, eğriyi veya düzenleyiciyi ayarlar veya döndürür.

Örnek

Örnek 1

Mavi doldurulan bir dörtgen tanımlayın:

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 sağlanmaktadır.

Sözdizimi

context.fillStyle=color|gradient|pattern;

Özellik değeri

Değer Açıklama
color Çizim doldurma renğini belirler CSS renk değeri。Varsayılan değer #000000'dır.
gradient Düzenleyici eğri nesnesi, çizimleri doldurmak için kullanılır (DoğrusalveyaRadyal)
pattern Düzenleyici pattern nesnesi, çizimleri doldurmak için kullanılır

Teknik ayrıntılar

Varsayılan değer: #000000

Daha fazla örnek

Örnek 2

Yukarıdan aşağıya doğru geçiş yapan bir eğri tanımlayın, bu eğriyi矩形的填充样式 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,"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 doğru geçiş yapan bir eğri tanımlayın, bu eğriyi矩形的填充样式 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,"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 doğru geçiş yapan bir eğri tanımlayın, bu eğriyi矩形的填充样式 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,"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 resim:

lamba

Çizimleri doldurmak için resim kullanın:

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

Tablo içindeki rakamlar, bu özelliği ilk tam olarak destekleyen 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.

HTML5 Canvas Referans Kılavuzu