Mfano wa Canvas fillStyle
Mifano na matumizi
fillStyle Mipangilio wa kufanya au kurejea rangi, mabara au mabomu ya kufillia picha ya mchora.
Mfano
Mfano 1
Tumia mifano ya kuhakikisha kutumia mabivinio ya kichwa cha mabara kufikia kimaekani ya kifungu:}
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
Tahadhari:Inafikia mifano zaidi kwenye chini ya ukurasa.
Inaonyesha
context.fillStyle=color|gradient|pattern;
Inaonyesha mimwiliwa ya kifungu.
| Mimwiliwa | Inaonyesha |
|---|---|
| color | Inaonyesha rangi ya uharibifu wa maelezo wa kimaekani. Wavu wa rangi cha CSS). Mimwiliwa ni #000000. |
| gradient | Kifungu cha mafunzo ya mabivinio kinatokana na uharibifu wa maelezo (Inayotumia uharibifu wa mabivinioauInayotumia uharibifu wa kina) |
| pattern | Kifungu cha pattern kinatokana na uharibifu wa maelezo. |
Maelezo ya kidharazifu
| Mimwili: | #000000 |
|---|
Mifano zaidi
Mifano ya 2
Tumia mifano ya kuhakikisha kutumia mafunzo ya mabivinio kutoka juu hadi chini, kama mifano ya kimaekani ya kifungu:
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);
Mifano ya 3
Tumia mifano ya kuhakikisha kutumia mafunzo ya mabivinio kutoka kushoto hadi kulia, kama mifano ya kimaekani ya kifungu:
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);
Mifano ya 4
Tumia mifano ya kuhakikisha kutumia mafunzo ya mabivinio kutoka mabara hadi mabara, kama mifano ya maelezo wa kimaekani ya kifungu:
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);
Mifano ya 5
Picha zilizotumiwa:
Tumia picha kufikia mifano ya maelezo:
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();
Msaada wa kifungu
Inanuzi zaidi zaidi zina huzuni zaidi kufikia kwa programu za kuhifadhi hifadhi ya wahenga ambayo inahakikisha inasaidia huzuni hii.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kuwa na ujasiri:Internet Explorer 8 na zaidi ya zamani haikubali elementi ya <canvas>.
