Canvas fillStyle Atribute

Canvas Reference Manual

I-definir at i-gamit

fillStyle I-set ato o i-ipa para sa kulay, gradient o pattern na paglalaman ng pagpipinta.

Eemplo

Eemplo 1

Tukuyin ang parang na pinupunan ng asul.

Ang iyong browser ay hindi sumusuporta sa tag na canvas.

JavaScript:

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

Subukan nang personal

Mga tip:Maraming sample na magagamit sa ibaba ng pahina.

Gramata

context.fillStyle=color|gradient|pattern;

Halaga ng atributo

Halaga Paglalarawan
color Ipinapakita ang kulay ng pagpupunan ng pagpipinta. CSS color value）。Default na halaga ay #000000。
gradient Objeto ng gradient na ginamit para mapupunan ang pagpipinta (LinearORadiative）。
pattern Objeto ng pattern na ginamit para mapupunan ang pagpipinta.

Detalye ng teknolohiya

Default na halaga: #000000

Higit pang mga sample

Sample 2

Tukuyin ang pagkakalipas ng kulay mula sa itaas hanggang sa ilalim bilang patern na pambalutin ng parang:

Ang iyong browser ay hindi sumusuporta sa tag na canvas.

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);

Subukan nang personal

Sample 3

Tukuyin ang pagkakalipas ng kulay mula sa kaliwa hanggang sa kanan bilang patern na pambalutin ng parang:

Ang iyong browser ay hindi sumusuporta sa tag na canvas.

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);

Subukan nang personal

Sample 4

Tukuyin ang pagkakalipas ng kulay mula sa puti hanggang sa pulang bilang patern na pambalutin ng parang:

Ang iyong browser ay hindi sumusuporta sa tag na canvas.

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);

Subukan nang personal

Sample 5

Ginamit na larawan:

lamp

Gamitin ang larawan para mapupunan ang pagpipinta:

Ang iyong browser ay hindi sumusuporta sa tag na HTML5 canvas.

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();

Subukan nang personal

Suporta ng browser

Ang mga numero sa talahanay ay nagtatalaga ng unang bersyon ng browser na ganap na sumusuporta sa katangian na iyon.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Pansin:Internet Explorer 8 at mas maagang bersyon ay hindi sumusuporta sa <canvas> elemento.

Canvas Reference Manual