HTML canvas createLinearGradient() method
Inafaa kufikiria na kutumia
createLinearGradient() Methodu inasababisha kipengele cha mafanikio kinavyofanyika kwa uraiko.
Mafanikio yanaweza kutumiwa kufungua msingi, kikwata, mabati, matukio na wengine wengi.
Msaada:Tumia hii kama strokeStyle au fillStyle Jaribu kuwa na thamani ya sababu.
Msaada:Tumia addColorStop() Methodu inasababisha rangi mbalimbali, na hali ambayo rangi inafikia katika kipengele cha gradient.
Mfano
Tazama pia:
Kufafanisha mafanikio kutoka mwezi hadi mwelele kwa rangi ya kifungu cha msingi ( kutoka kushoto hadi kulia), kama rangi ya kifungu cha msingi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Inafaa kufikiria
context.createLinearGradient(x0,y0,x1,y1);
Wakati wa parama
| Parama | Kueleza |
|---|---|
| x0 | Ukingo wa x wote wa mafanikio wa kuanzia |
| y0 | Ukingo wa y wote wa mafanikio wa kuanzia |
| x1 | Ukingo wa x wote wa mafanikio |
| y1 | Ukingo wa y wote wa mafanikio |
Zaidi ya mafano
Mfano 2
Kufafanisha mafanikio kutoka juu hadi chini kwa rangi ya kifungu cha msingi:
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);
Mfano 3
Kufafanisha mafanikio kutoka mwezi hadi kichwa na kueleza kwa rangi ya kifungu cha msingi:
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);
Mawasiliano wa kibao
Inanavyo namba katika tabia hii inaonyesha toleo la kwanza la kumachagua kwa kufikiria hisia hii.
| 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 hayafikii kumachagua elementi ya <canvas>.
