HTML canvas fillStyle egenskap

HTML5 Canvas reference manual

Definition och användning

fillStyle Egenskapen sätter eller returnerar färgen, gradienten eller mönstret för fyllning av ritning

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

Try it yourself

Tips:Mer exempel finns på sidan botten.

Syntaks

context.fillStyle=color|gradient|pattern;

Egenskapsvärde

Värde Beskrivning
color Indikerar färgen för ritningens fyllning CSS-färgvärde.Standardvärdet är #000000.
gradient Gradient-objektet används för att fylla ritningen (LinjärellerRadiell)
pattern Pattern-objektet används för att fylla ritningen

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

Try it yourself

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

Try it yourself

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

Try it yourself

Exempel 5

Använda bild:

lamplamp

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

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas reference manual