Canvas fillStyle-attribut

Canvas-referencehandbok

Definition och användning

fillStyle Inställningar eller återgivning av färg, gradient eller mönster för målning.

Exempel

Exempel 1

Definiera en rektangel fylld med blått:

Din webbläsare stöder inte canvas-tagg.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Prova själv

Tips:Mer exempel finns på sidan botten.

Syntaks

context.fillStyle=color|gradient|pattern;

Egenskapsvärde

Värde Beskrivning
color Indikerar ritningsfyllningsfärgen CSS-färgvärde). Standardvärdet är #000000。
gradient Gradient-objekt för fyllning av ritning (LinjärellerRadiell)。
pattern Pattern-objekt för fyllning av ritning.

Tekniska detaljer

Standardvärde: #000000

Mer exempel

Exempel 2

Definiera en gradient från topp till botten som fyllningsstil för rektangeln:

Din webbläsare stöder inte canvas-tagg.

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

Prova själv

Exempel 3

Definiera en gradient från vänster till höger som fyllningsstil för rektangeln:

Din webbläsare stöder inte canvas-tagg.

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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Prova själv

Exempel 4

Definiera en gradient från svart till röd till vit som fyllningsstil för rektangeln:

Din webbläsare stöder inte canvas-tagg.

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

Prova själv

Exempel 5

Använda bilder:

lampa

Använd bilder för att fylla ritningen:

Din webbläsare stöder inte HTML5 canvas-tagg.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Prova själv

Webbläsarstöd

Tabellen siffror anger den första webbläsareversion som helt stöder detta egenskap.

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

Observera:Internet Explorer 8 och äldre versioner stöder inte <canvas>-elementet.

Canvas-referencehandbok