Kitengo cha Canvas createLinearGradient()

Maukio wa canvas

maudumisha na matumizi

createLinearGradient() Inaunda kipengele cha mawingu kwa hatua inayotengenezwa kwa hatua.

Mawingu inaweza kutumiwa kufillisha mabara, mabara, mabara ya kuelekea na matukio mengi mengi.

Inasikitisha:Tumia hii kama: strokeStyle au fillStyle Wakati wa tabia.

Inasikitisha:Tumia: addColorStop() Inaainisha mawingu tofauti, pengine kama ucheo wa mawingu kwenye kipengele cha gradient.

Mfano

Tazama pia:

Inaainisha mawingu kutoka mwezi hadi mwezi wa kati ( kutoka kushoto hadi kulia), kama uharibifu wa mabara:

Barabara yako ya kurejea hauzungumza taga HTML5 canvas.

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

Jifanya tena

Inasababu

context.createLinearGradient(x0,y0,x1,y1);

Wakati wa parama

Parama Maelezo
x0 Ucheo wa x0 wa mawingu.
y0 Ucheo wa y0 wa mawingu.
x1 Ucheo wa x1 wa mawingu.
y1 Ucheo wa yako ya yote ya mawingu.

Mafano mengi

Mfano 2

Inaainisha mawingu kutoka juu hadi chini kama uharibifu wa mabara:

Barabara yako ya kurejea hauzungumza taga 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);

Jifanya tena

Mfano 3

Inaainisha mawingu kutoka mwezi hadi kichwa na kuelekea kwenye barabara kama uharibifu wa mabara:

Barabara yako ya kurejea hauzungumza taga 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);

Jifanya tena

Mwongozo wa barabara

Mafuatilia ya namba kwenye tabia huzungumza na barabara ya kwanza ya kusimamia tabia hii.

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

Kweli:Internet Explorer 8 na zaidi ya zamani hauweza kusaidia elementi ya <canvas>.

Maukio wa canvas