Kifungu cha fillStyle cha HTML canvas
Maelezo na matumizi
fillStyle Matumizi ya kifungu hii ni kumengenea na rangi, gradient au pattern kinachotumiwa kufungua uchoraji.
Mbinu
Mbinu 1
Mwambia kufungua msingi kwa rangi ya kichwa:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
Tahadhari:Mafanikio ya kina ya wavuti.
Inafaa
context.fillStyle=color|gradient|pattern;
Chaguo cha matumizi ya kifungu
| Chaguo | Maelezo |
|---|---|
| color | Inaamua rangi ya kifungaji cha uchoraji Chaguo cha rangi cha CSS.Chaguo cha kuzingatia ni #000000. |
| gradient | Kifungu cha gradient kinachotumiwa kufungua mawingu ya uchoraji (LinearauRadiation) |
| pattern | Kifungu cha pattern kinachotumiwa kufungua mawingu ya uchoraji |
Mafanikio ya teknolojia
| Chaguo cha kuzingatia: | #000000 |
|---|
Mafanikio ya kina
Mbinu 2
Mwambia mawingu kutoka juu hadi chini, kama mawingu ya kifungu cha msingi kwa sababu ya kichwaji:
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);
Mbinu 3
Mwambia mawingu kutoka kushoto hadi kulia, kama mawingu ya kifungu cha msingi kwa sababu ya kichwaji:
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);
Mbinu 4
Mwambia mawingu kutoka mweupe hadi kichwa hadi kijani, kama mawingu ya kifungu cha msingi kwa sababu ya kichwaji:
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);
Mbinu 5
Picha zilizotumiwa:
Tumia picha kuongeza mawingu ya uchoraji:
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();
Makampuni ya kifaa
Mwili wa kati inaonekana na na kina ya kitumia kwa sababu ya kina hiki.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Tahadhari:Internet Explorer 8 na zaidi ya hayo hazikubadilika <canvas> ˈkænsəs
