Canvas createLinearGradient() Metodong

Canvas 参考手册

Definisyon at paggamit

createLinearGradient() Ang paraan ay gumagawa ng linear gradient object.

Ang gradient ay maaaring gamitin para sa pagpunan ng parang, bilog, linya, teksto at iba pa.

Mga payo:Gumamit ng bagay na ito bilang strokeStyle o fillStyle Halaga ng Atribute.

Mga payo:Gumamit ng: addColorStop() Ang paraan ay nagtutukoy ng iba't ibang kulay, at saan nasa gradient object ang posisyon ng kulay.

Sample

Mga pangkatilingan:

Tukuyin ang pagbabagong kulay mula sa itim hanggang sa puti (mula kaliwa hanggang kanan) bilang estilo ng pagpunan sa parang.

Ang iyong browser ay hindi sumusuporta sa tag na 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);

Subukan nang personal

Mga Tagapagsalita

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

Halaga ng Parametro

Parametro Paglalarawan
x0 Ang yugto ng x na nagsisimula ng pagbabagong kulay.
y0 Ang yugto ng y na nagsisimula ng pagbabagong kulay.
x1 Ang yugto ng x na nagtatapos ng pagbabagong kulay.
y1 Ang yugto ng y na nagtatapos ng pagbabagong kulay.

Higit pang mga sample

Sample 2

Tukuyin ang pagbabagong kulay (mula itaas hanggangibaba) bilang estilo ng pagpunan sa 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 pagbabagong kulay mula sa itim hanggang sa pulang puti bilang estilo ng pagpunan sa 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

Suporta ng browser

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

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

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

Canvas 参考手册