Canvas createLinearGradient() -menetelmä

Canvas-ohjekirja

Määrittely ja käyttö

createLinearGradient() Metodi luo lineaarisen gradientti-objektin.

Gradientit voidaan käyttää täyttämään suorakulmioita, ympyröitä, viivoja, tekstejä jne.

Vinkki:Käytä tätä objektia strokeStyle tai fillStyle ominaisuuksien arvot.

Vinkki:Käytä addColorStop() Metodi määrittelee eri värit ja missä gradient-objektissa värit sijaitsevat.

Esimerkki

Katso myös:

Määritä mustasta valkoiseen suuntautuva väriaine (vasemmalta oikealle), joka toimii suorakulmion täyttötyylinä:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"musta");
grd.addColorStop(1,"valkoinen");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Kokeile itse

Syntaksi

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

Parametrin arvo

Parametri Kuvaus
x0 Väriainekäyrän alkupään x-koordinaatti.
y0 Väriainekäyrän alkupään y-koordinaatti.
x1 Väriainekäyrän lopun x-koordinaatti.
y1 Väriainekäyrän lopun y-koordinaatti.

Lisää esimerkkejä

Esimerkki 2

Määritä yläpäästä alaspäin suuntautuva väriaine, joka toimii suorakulmion täyttötyylinä:

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"musta");
my_gradient.addColorStop(1,"valkoinen");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kokeile itse

Esimerkki 3

Määritä mustasta punaiseen ja valkoiseen vaihtuva väriaine, joka toimii suorakulmion täyttötyylinä:

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"musta");
my_gradient.addColorStop(0.5,"punainen");
my_gradient.addColorStop(1,"valkoinen");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kokeile itse

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan kyseisen ominaisuuden selaimen version.

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

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.

Canvas-ohjekirja