En son web geliştirme öğreticiler
 

HTML canvas fillStyle Propery

<HTML Tuval Referans

Örnek

dikdörtgen kırmızı dolgu-renk tanımlayın:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

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

Tarayıcı Desteği

Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.

Yöntem
fillStyle() Evet 9.0 Evet Evet Evet

Tanımı ve Kullanımı

fillStyle özelliği, ayarlar veya çizim doldurmak için kullanılan renk, degrade veya desen döndürür.

Varsayılan değer: # 000000
JavaScript sözdizimi: context .fillStyle= color | gradient | pattern ;

Mülkiyet Değerler

değer Açıklama Oynat
color Bir CSS renk değeri çizim dolgu rengini belirtir. Varsayılan değer # 000000 olduğunu Oynat "
gradient Bir gradyan nesnesi ( doğrusal ya da radial ) çizim doldurmak için kullanılan
pattern Bir pattern nesne çizim doldurmak için

Diğer Örnekler

Örnek

Gradyan tanımlama (top to bottom) için dikdörtgen dolgu tarzı olarak:

Yourbrowserdoesnotsupportthecanvastag.

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);
Kendin dene "

Örnek

Bir gradyan tanımlayın (left to right) dikdörtgen için dolgu tarzı olarak:

Yourbrowserdoesnotsupportthecanvastag.

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);
Kendin dene "

Örnek

dikdörtgen için dolgu tarzı olarak, beyaza, kırmızıya, siyahtan giden bir gradyan tanımlayın:

Yourbrowserdoesnotsupportthecanvastag.

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);
Kendin dene "

Görüntü kullanmak:

lamba

Örnek

Çizimi doldurmak için resim kullanma:

YourbrowserdoesnotsupporttheHTML5canvastag.

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();
Kendin dene "

<HTML Tuval Referans