Canvas createLinearGradient() 方法

Canvas referencemanual

定义和用法

createLinearGradient() Metoden opretter et lineært gradientobjekt.

Gradationer kan bruges til at fylde rektangler, cirkler, linjer, tekst og meget mere.

Tip:Brug dette objekt som strokeStyle eller fillStyle egenskabens værdi.

Tip:Brug addColorStop() Metoden specificerer forskellige farver og hvor farverne skal placeres i gradient-objektet.

Eksempel

Se også:

Definer en gradation fra sort til hvid (fra venstre til højre) som baggrundsfarve for rektangen:

Din browser understøtter ikke HTML5 canvas-tagen.

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

Prøv det selv

Syntaks

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

Parameterværdi

Parameter Beskrivelse
x0 X-koordinaten for startpunktet af gradationen.
y0 Y-koordinaten for startpunktet af gradationen.
x1 X-koordinaten for afslutningen af gradationen.
y1 Y-koordinaten for afslutningen af gradationen.

Flere eksempler

Eksempel 2

Definer en gradation (fra top til bund) som baggrundsfarve for rektangen:

Din browser understøtter ikke canvas-tagen.

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

Prøv det selv

Eksempel 3

Definer en gradation fra sort til rød og derefter hvid som baggrundsfarve for rektangen:

Din browser understøtter ikke canvas-tagen.

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

Prøv det selv

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Bemærk:Internet Explorer 8 og ældre versioner understøtter ikke <canvas> elementet.

Canvas referencemanual