HTML canvas fillStyle-ominaisuus

HTML5 Canvas -käsikirja

Määrittely ja käyttö

fillStyle Asettaa tai palauttaa värin, gradientin tai patternin, jota käytetään täyttämään piirros.

Esimerkki

Esimerkki 1

Definioi sinistä täyttöä käyttävä suorakulmio:

Selaimesi ei tue canvas-tagi.

JavaScript:

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

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alaosassa.

Syntaksi

context.fillStyle=color|gradient|pattern;

Ominaisuusarvo

Arvo Kuvaus
color Ilmaisee piirrostäytön väriä: CSS-väriarvo. Oletusarvo on #000000.
gradient Gradientti-objekti, jota käytetään täyttämään piirros (LineaarinentaiRadioaktiivinen)
pattern Pattern-objekti, jota käytetään täyttämään piirros:

Tekninen yksityiskohta

Oletusarvo: #000000

Lisää esimerkkejä

Esimerkki 2

Definioi gradientti ylältä alaspäin, joka toimii suorakulmion täyttötyylinä:

Selaimesi ei tue canvas-tagi.

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

Kokeile itse

Esimerkki 3

Definioi gradientti vasemmalta oikealle, joka toimii suorakulmion täyttötyylinä:

Selaimesi ei tue canvas-tagi.

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

Kokeile itse

Esimerkki 4

Definioi gradientti mustasta punaiseen ja valkoiseen, joka toimii suorakulmion täyttötyylinä:

Selaimesi ei tue canvas-tagi.

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

Kokeile itse

Esimerkki 5

Käytettävät kuvat:

lamppu

Käytä kuvaa täyttääksesi piirroksen:

Selaimesi ei tue HTML5 canvas-tagi.

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

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

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

HTML5 Canvas -käsikirja