Canvas fillStyle-ominaisuus

Canvas referenssikirja

Määrittely ja käyttö

fillStyle Määrittää tai palauttaa väriä, pehmennystä tai mallia, jota käytetään maalaamiseen.

Esimerkki

Esimerkki 1

Määritä sininen täyttöväriä käyttävä suorakulmio:

Your browser does not support the canvas tag.

JavaScript:

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

Kokeile itse

Vinkki:Sivun alareunassa on lisää esimerkkejä.

Syntaksi

context.fillStyle=color|gradient|pattern;

Ominaisuusarvo

Arvo Kuvaus
color Ilmaisee piirustuksen täyttöväriä CSS-väriarvo). Oletusarvo on #000000.
gradient Gradient-objekti, jota käytetään täyttämään piirustus (LineaarinenTaiRadioaktiivinen)
pattern Pattern-objekti, jota käytetään täyttämään piirustus.

Tekninen yksityiskohta

Oletusarvo: #000000

Lisää esimerkkejä

Esimerkki 2

Määritä ylältä alaspäin suuntautuva väripaletti, joka toimii ruudukon 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,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kokeile itse

Esimerkki 3

Määritä vasemmalta oikealle suuntautuva väripaletti, joka toimii ruudukon 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,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Kokeile itse

Esimerkki 4

Määritä mustasta punaiseen ja valkoiseen vaihtuva väripaletti, joka toimii ruudukon 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,"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äytetyt kuvat:

lamppu

Käytä kuvaa täyttämään piirustus:

Your browser does not support the HTML5 canvas tag.

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

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

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

Canvas referenssikirja